css - 第一行单元格跨多列时的列宽

Question

当第一行中的单元格跨越多列时，如何在具有指定宽度且使用固定表格布局的表格中指定列宽？

使用以下代码，第一列获得所需的宽度 100px。其他 3 列的宽度相等，这不是我想要的。如何让第 2 列的宽度 200px、第 3 列 400px 和第 4 列填充剩余的空间，同时仍然使用 table-layout: fixed?

<table style="width: 100%; table-layout: fixed;">
   <tr>
      <td style="width: 100px">First cell</td>
      <td colspan="3">Spanning cell</td>
   </tr>
   <tr>
      <td style="background: red">1</td>
      <td style="width: 200px; background: blue">2</td>
      <td style="width: 400px; background: green">3</td>
      <td style="background: yellow">4</td>
   </tr>
</table>

Answer 1

您可以使用colgroup 和col:

<table style="width: 100%; table-layout: fixed;">
    <colgroup>
       <col style="width: 100px;">
       <col style="width: 200px;">
       <col style="width: 400px;">
    </colgroup>
   <tr>
      <td>First cell</td>
      <td colspan="3">Spanning cell</td>
   </tr>
   <tr>
      <td style="background: red">1</td>
      <td style="background: blue">2</td>
      <td style="background: green">3</td>
      <td style="background: yellow">4</td>
   </tr>
</table>

http://jsfiddle.net/07mno6r5/