第一行单元格跨多列时的列宽
Column width when cell in first row spans multiple columns
当第一行中的单元格跨越多列时,如何在具有指定宽度并使用固定 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>
您可以使用 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>
您可以使用 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
当第一行中的单元格跨越多列时,如何在具有指定宽度并使用固定 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>
您可以使用 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>
您可以使用 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