HTML 表将单元格拆分为不同行的不同列数，未按预期执行

Question

所以我尝试使用 colspan 在 table 中 拆分单元格 ，但我看到了一些奇怪的行为。在下面的代码中，第一个 table 没有按预期呈现。

特别是具有 1/4 和 1/2 列的行未跨越 2x25% 的占用率，然后是使用剩余 space 的行，这打乱了 1/ 的正确跨越3 个单元格和 1/2 个单元格...另一方面，第二个 table 看起来符合预期。

我不确定这是否是 Chrome 中的 错误？？它似乎在 IE9 中也有山丘行为，我在这里遗漏了什么吗？有没有更好的方法来完成这个？

您可以在以下位置查看代码的实时版本：https://jsfiddle.net/4xwm33n6/

Unexpected alignment:
<table border="1" align="center" cellspacing="0" width="400px">
  <tr >
      <td colspan="100%"  align="center">1/1</td>
  </tr>
  <tr> 
    <td colspan="33.33%" align="center">1/3</td>
    <td colspan="33.33%" align="center">1/3</td>
    <td colspan="33.33%" align="center">1/3</td>
  </tr>
  <tr> 
    <td colspan="25%" align="center">1/4</td>
    <td colspan="25%" align="center">1/4</td>
    <td colspan="50%" align="center">1/2</td>
  </tr>
  <tr> 
    <td colspan="50%" align="center">1/2</td>
    <td colspan="50%" align="center">1/2</td>
  </tr>
</table>

This works (but two 1/4 cannot be merged as one):
<table border="1" align="center" cellspacing="0" width="400px">
  <tr >
      <td colspan="100%"  align="center">1/1</td>
  </tr>
  <tr> 
    <td colspan="33.33%" align="center">1/3</td>
    <td colspan="33.33%" align="center">1/3</td>
    <td colspan="33.33%" align="center">1/3</td>
  </tr>
  <tr> 
    <td colspan="25%" align="center">1/4</td>
    <td colspan="25%" align="center">1/4</td>
    <td colspan="25%" align="center">1/4</td>
    <td colspan="25%" align="center">1/4</td>
  </tr>
  <tr> 
    <td colspan="50%" align="center">1/2</td>
    <td colspan="50%" align="center">1/2</td>
  </tr>
</table>

Answer 1

抱歉写了像回答这样的评论，我不能评论这个post:(

colspan 表示您要合并多少个单元格，而不是 width。您不能在 colspan 中设置 width。

Answer 2

要完成您想做的事，您需要遵循以下原则：

<table>
<tr>
  <td colspan="12">1/1</td>
</tr>
<tr>
  <td colspan="6">1/2</td>
  <td colspan="6">1/2</td>
</tr>
<tr>
  <td colspan="4">1/3</td>
  <td colspan="4">1/3</td>
  <td colspan="4">1/3</td>
</tr>
<tr>
  <td colspan="3">1/4</td>
  <td colspan="3">1/4</td>
  <td colspan="3">1/4</td>
  <td colspan="3">1/4</td>
</tr>
</table>

这样您就可以组合所需的单元格数量。顺便说一句，我使用 4 和 3 的最小公倍数得到了 12...

Answer 3

您应该使用数字而不是百分比来使用 colspan="#"。例如，如果您希望 td 跨越两列，请使用 colspan="2"

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td colspan="2">4</td>
        <td>5</td>
    </tr>
</table>

https://jsfiddle.net/xxurc50n/1/

HTML 表将单元格拆分为不同行的不同列数，未按预期执行

HTML tables split cells into different number of columns for different rows not performing as expected

html

tablelayout