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

Posted 2023-05-07

上图说话
如图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>

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

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

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

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

追答

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

参考技术A

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

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

然后在 css 里面设置

.col0min-width:200px;
.col1min-width:400px;
.col2min-width:800px;
.col3min-width:1600px;

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

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

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

参考技术B 对tr进行设置试试 参考技术C js里面是不是对表格的列宽做设置了追问

没有写js啊 都是css

急！！Eclipse中使用tableviewer，如何自动调整表中各列的列宽？？

我使用tableviewer建表，我建的表的列数很多，有十几列，发觉就算设了列宽，打开页面时的表格各列都会聚在一起，很难看，表下方不会出现水平滚动条。
请问各位高手，如何可以做成列宽按照列名的长度而自动调整呢？

以下摘录我建表的代码：
//创建表格的列
tLayout.addColumnData(new ColumnWeightData(20));
new TableColumn(table, SWT.NONE).setText("序号");

tLayout.addColumnData(new ColumnWeightData(40));//设置列宽
new TableColumn(table, SWT.NONE).setText("员工编号");

tLayout.addColumnData(new ColumnWeightData(40));
new TableColumn(table, SWT.NONE).setText("员工姓名");

tLayout.addColumnData(new ColumnWeightData(60));
new TableColumn(table, SWT.NONE).setText("员工权限级别");

tLayout.addColumnData(new ColumnWeightData(20));
new TableColumn(table, SWT.NONE).setText("性别");

tLayout.addColumnData(new ColumnWeightData(40));
new TableColumn(table, SWT.NONE).setText("出生年月");

tLayout.addColumnData(new ColumnWeightData(50));
new TableColumn(table, SWT.NONE).setText("身份证号码");

tLayout.addColumnData(new ColumnWeightData(20));
new TableColumn(table, SWT.NONE).setText("学历");

tLayout.addColumnData(new ColumnWeightData(20));
new TableColumn(table, SWT.NONE).setText("专业");

tLayout.addColumnData(new ColumnWeightData(40));
new TableColumn(table, SWT.NONE).setText("职位编号");

tLayout.addColumnData(new ColumnWeightData(40));
new TableColumn(table, SWT.NONE).setText("婚姻状况");

tLayout.addColumnData(new ColumnWeightData(70));
new TableColumn(table, SWT.NONE).setText("进入本公司时间");

tLayout.addColumnData(new ColumnWeightData(80));
new TableColumn(table, SWT.NONE).setText("住址");

tLayout.addColumnData(new ColumnWeightData(40));
new TableColumn(table, SWT.NONE).setText("联系电话");

tLayout.addColumnData(new ColumnWeightData(50));
new TableColumn(table, SWT.NONE).setText("备注");

请各位帮帮小妹该添加什么代码做到自动调整列宽呢？？跪谢了....
TO第一位回答者：你说的这些我当然懂，我的问题是如何编写“自动调整列宽”的代码，我想知道的是代码的具体内容，而不是你所说的介绍Eclipse和什么建程序的。我不能采纳你的回答，根本答非所问。

参考技术A 有个pack()函数，可以自动调整表头，但是不可以自动调整内容 参考技术B 06年呀。。。。。我现在也遇到这个问题了。。。。