html table宽度自动 Html Table自适应宽度 指定列固定宽度 其他列均分宽度

做表单界面时，我想到最好的方法应该是，标题栏所在的列宽度固定，内容栏所在的列宽度自适应且要均分，这样整体表格看起来才美观有序。

要做到这一点，目前只摸索出一种办法：

1，给table加table-layout: fixed;

2，在每个table的第一行，加

，有多少列，对应加多少个

3，给指定列固定宽度的

加成，然后给title定义宽度，其他列的加成

案例代码：

案例文档

table{

width: 100%;

border-collapse: collapse;

border: 1px solid #000;

word-break:break-word;

word-wrap:break-word;

table-layout: fixed;

}

table tr td{

border: 1px solid #000;

}

.title {

background-color: #eee;

width: 120px;

text-align: center;

}

注意：这里有一个问题，有可能你程序没法在table的第一行

前面加，比如的webform里面就不知道怎么加，此时的变通方法是，把换成一个空的，在上同样加对应的class和width属性，然后通过样式把这个空行的边框和高度去掉，不显示。

原理：通过控制第一行各个列的宽度，来实现对整个表格的列进行控制。