html 表 colspan 没有按预期工作

Question

HTML 概念有时是如此可怕。

这是我在 html 表中使用 colspan 的代码，看起来不像我期望的那样。

<table border="1">
  <tr>
    <td colspan="3">a</td>
  </tr>
  <tr>
    <td colspan="2">b</td>
    <td>c</td>
  </tr>
</table>

我想要的是：单元格 'a'应该看起来是3 个单元格宽，单元格 'b'应该看起来是2 个单元格宽，单元格 'c'应该看起来是1 个单元格宽。

它正在做的是：单元格'a'是2个单元格宽，单元格'b'和'c'是1个单元格宽。

任何建议谢谢。

Answer 1

属性colspan确定单元格与其他单元格重叠的列数，而不是这些列的绝对大小。在您的情况下，span 2 有两个 spans。你怎么能说不是呢？不要通过单元格的宽度来判断它。跨度不是宽度。您必须添加另一个较小的列才能将其显示为包含两个跨度的列。

在最后一个示例的代码片段中查看您期望的解决方案。

<h3>Example 1</h3>

<table border="1">
    <tr><td>col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">a</td></tr>
    <tr><td colspan="2">b</td><td colspan="1">c</td></tr>
</table>

<h3>Example 2</h3>

<table border="1">
    <tr><td width="80px">wide col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2">span 2</td><td colspan="1">span 1</td></tr>
</table>

<h3>Your case</h3>

<table border="1">
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2" width="66%">span 2</td><td width="33%">span 1</td></tr>
</table>