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/

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

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

2 个答案: