Question

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

特别是具有1/4和1/2列的行不会占用2x25％的占用率，然后使用剩余空间的行，这会混淆1/3单元和1/2的正确跨度cell ...另一方面，第二个表看起来像预期的那样。

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

查看实时版代码

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

要做你想做的事，你需要的是：

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

很抱歉写了评论，如回答，我无法对此帖发表评论：（

colspan表示要合并的单元格数，而不是width。您无法在width中设置colspan。

Answer 3

你应该使用colspan =＆＃34;＃＆＃34;使用数字而不是百分比。例如，如果您希望td跨越两列，请使用colspan =＆＃34; 2＆＃34;

<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表将单元格拆分为不同数量的列

3 个答案: