我有一个简单的 HTML 表格示例，其中包含许多 div block 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
<table border=1 width="1000px" >
<tr><td></td><td></td><td></td><td></td></tr>
<tr valign="top"><td colspan="1" ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3" ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
<tr valign="top"><td colspan="4" ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
<tr valign="top"><td colspan="2" ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2" ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
</table>
</body>
</html>
问题是第 2 行的外观不正确。 colspans 的行为不符合预期。如果我删除第四行，那么第二行会正常运行。
我知道 div 和 CSS 是可行的方法，但对于这个应用程序，目前这是不可能的。
最佳答案
你的问题是auto table layout .浏览器很难查看所有单元格并计算出每个单元格将从其内容中获得多少宽度；当有 colspans 时，它是双重困难的(特别是在这个例子中，根本没有办法告诉第 3 列和第 4 列应该有多宽)；如果你是可怜的老掉牙的 Internet Explorer，那它就难上加难了，保佑。
不要让您的浏览器挣扎、喘息和缓慢呈现:使用 fixed table-layout并准确声明每列的宽度。通常这将通过 <col> 完成。元素:
#thing { width: 950px; table-layout: fixed; border-spacing: 0; }
#thing .wide { width: 295px; }
#thing .narrow { width: 180px; }
#thing.box { border: solid black 1px; }
<table id="thing">
<col class="narrow" /><col class="wide" /><col class="wide" /><col class="narrow" />
<tr>
<td colspan="1"><div class="box">1</div></td>
<td colspan="3"><div class="box">2</div></td>
</tr>
<tr>
<td colspan="4"><div class="box">3</div></td>
</tr>
<tr>
<td colspan="2"><div class="box">4</div></td>
<td colspan="2"><div class="box">5</div></td>
</tr>
</table>
但是 Webkit 中有一个错误忽略了 <col>该列中没有单个未跨越的单元格时的宽度。这对于表格来说是很不寻常的，但在上面的例子中就是这种情况:只有第一列包含一个未跨接的单元格。要解决此问题，您可以替换 <col>开头有一行无效的元素，样式设置为具有最小高度:
#thing .cols td { height: 1px; line-height: 1px; font-size: 1px; }
<tr class="cols">
<td class="narrow"></td><td class="wide"></td><td class="wide"></td><td class="narrow"></td>
</tr>
或者，有时不那么打扰，保留 <col> s 并在底部添加一个无效行:
<tr class="cols"><td></td><td></td><td></td><td></td></tr>
关于使用 colSpans 的 HTML 表格未按预期显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1723979/