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

Question

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

使用以下代码，第一列获得所需的宽度 100px。其他 3 列的宽度相等，这不是我想要的。如何让第 2 列的宽度为 200px，第 3 列的宽度为 400px，第 4 列的宽度为 space，同时仍使用 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/

Answer 2

您可以使用 Colgroup 将列宽设置为：

<table style="width: 100%; table-layout: fixed;">
 <colgroup>
    <col style="width: 100px"/>
    <col style="width: 200px;"/>
    <col style="width: 400px"/>
    <col style="width: auto"/>            
  </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>

这里有一个例子：JSFiddle

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

Column width when cell in first row spans multiple columns

css

html

html-table