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>

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

它正在做的是:cell 'a' 是 2 cells wide，cell 'b' & 'c' 是 1 个单元格宽度。

任何建议谢谢。

Answer 1

属性 colspan 确定一个单元格相对于其他单元格有多少列重叠，而不是这些列的绝对大小。在您的例子中，跨度 2 有两个跨度。你怎么能说不是呢？不要通过单元格的宽度来判断它。跨度不是宽度。您必须添加另一个较小的列才能显示它作为两个跨度的列。

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

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