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

时间:2015-01-12 22:00:33

标签: html css html5 html-table

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

使用以下代码,第一列获得所需的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>

2 个答案:

答案 0 :(得分:0)

您可以使用colgroupcol

<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/

答案 1 :(得分:0)

您可以使用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