Html Table自适应宽度，指定列固定宽度，其他列均分宽度

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

要做到这一点，目前只摸索出一种办法：
1，给table加table-layout: fixed;
2，在每个table的第一行，加<colgroup><col>，有多少列，对应加多少个<col>
3，给指定列固定宽度的<col>加成<td class="title">，然后给title定义宽度，其他列的<col>加成<col width="auto">

案例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>案例文档</title>
  <style>
    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;
    }
  </style>
</head>
<body>
  <table>
    <colgroup>
      <col class="title">
      <col width="auto">
      <col class="title">
      <col width="auto">
    </colgroup>
    <tr>
      <td class="title">标题：</td>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td class="title">标题：</td>
      <td>内容</td>
      <td class="title">标题：</td>
      <td></td>
    </tr>
    <tr>
      <td class="title">标题：</td>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td class="title">标题：</td>
      <td>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</td>
      <td class="title">标题：</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

注意：这里有一个问题，有可能你程序没法在table的第一行<tr>前面加<colgroup><col>，比如asp.net的webform里面就不知道怎么加，此时的变通方法是，把<colgroup><col>换成一个空的<tr><td>，在<td>上同样加对应的class和width属性，然后通过样式把这个空行的边框和高度去掉，不显示。

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

董川民