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 个单元格宽。

任何建议谢谢。

原文由 Sushil Kumar Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 TRiNE 发布，翻译遵循 CC BY-SA 3.0 许可协议