【问题标题】：HTML - Possible to fix table width?HTML - 可以修复表格宽度吗？
【发布时间】：2013-03-01 17:23:30
【问题描述】：

是否可以制作一个表格，让我们说 4 列，1 行，宽度为 100 像素，然后必须在下面的单元格中创建一个 200 像素的单元格，而无需创建新表格？

因为如果我这样做，那么当我在新单元格中设置 200px 的宽度时，另一个单元格也会改变宽度。我希望新单元格扩展以填充剩余的宽度。

这里是一个例子..

<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td width="200px">5</td>
<td width="200px">6</td>
</tr>
</table>

【问题讨论】：

神圣的 HTML 101，蝙蝠侠。 google.com/search?q=html+tables

标签： html html-table width

【解决方案1】：

JsFiddle demo

你实际上需要使用colspan，所以你的代码将如下所示，这将完成你想要的工作

<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td  colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</table>

<td colspan="number"> -number 指定单元格应跨越的列数。注意：colspan="0" 告诉浏览器将单元格跨越到列组的最后一列（colgroup）

【讨论】：

【解决方案2】：

尝试从第二行删除单元格宽度，但为每个单元格添加一个附加属性，因此它看起来像：

<td colspan="2"></td>
<td colspan="2"></td>

这应该让这两个单元格占 2 个单元格宽度，而无需重新定义它们的宽度。

MDN TD - Attribute Colspan

【讨论】：