Question

html table 如何设置 使每行各列的列宽不一样？？

上图说话
如图1 一共5列 后3行将最后两列合并
希望达到图2的效果，下面的列宽应该与上面是不一样的。我对每一个单元格td都进行了列宽width的设置，但是不起效果，为什么？？是不是合并单元格必须与上面的单元格列宽对齐？？

图1

图2

上代码，css部分略去：（在css中每一个td的列宽都设置了值！）
<tr>
<td rowspan="2" >责任人：</td>
<td >联系人：</td>
<td ><input type="text" /></td>
<td >手机：</td>
<td ><input type="text"/></td>
</tr>
中间相同部分略去.......
<tr>
<td rowspan="3">资质信息：</td>
<td><img src="src/img/img.png" alt=""></td>
<td><img src="src/img/img.png" alt=""></td>
<td colspan="2" ><img src="src/img/img.png" alt=""></td>
</tr>
<tr>
<td ><input type="text" value="请输入营业执照注册号" /></td>
<td ><input type="text" value="请输入税务登记号" /></td>
<td colspan="2" ><input type="text"value="请输入组织机构代码" /></td>
</tr>
<tr>
<td ><input type="button" value="上传营业执照图片"></td>
<td ><input type="button" value="上传税务登记证图片"></td>
<td colspan="2" ><input type="button" value="上传组织结构代码图片"></td>
</tr>





Answer 1

你的思路就是错误的。。。

非要这么麻烦每个单元格设置属性。。。

使用表格嵌套啊！设置padding和margin属性让嵌套表格重叠不就好了。

追问

是在“资质信息”后面的合并单元格里再嵌套一个1*3的单元格吗?

追答

对。特别是这种合并单元格的，或者是这种单元格宽度不同、高度不同的，使用表格嵌套是最方便的

Answer 2

使用 <colgroup> 元素
在 <table> 下添加以下元素作为 <table> 的第一个子元素

<colgroup>
<col class="col0" />
<col class="col1" />
<col class="col2" />
<col class="col3" />
...
</colgroup>

然后在 css 里面设置

.col0{min-width:200px;}
.col1{min-width:400px;}
.col2{min-width:800px;}
.col3{min-width:1600px;}

其实你的思路就是错误的。

非要这么麻烦每个单元格设置属性。

使用表格嵌套啊！设置padding和margin属性让嵌套表格重叠不就好了。

Answer 3

对tr进行设置试试

Answer 4

js里面是不是对表格的列宽做设置了

追问

没有写js啊 都是css