Question

我想这是一个非常基本的问题，但我无法正确使用此表：

+---------------------------+
|                           |
+-------------+-------------+
|             |             |
|             +-------------+
|             |             |
+-------------+-------------+

我猜想如果我使用<tr> <td>并colspan="2"并且该表有四列，那么下一行colspan="2"就会出现在其他行中那条线，但它似乎占据了整条线。

这是我的代码：

<table>
  <tr>
    <td colspan="4" style="background-color:red">Name</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="3" style="background-color:blue">Description</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:green">Option 1</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:yellow">Option 2</td>
  </tr>
</table>

这是我的JSFiddle。

我发现将<tr>置于<td>内是个坏主意所以我不知道如何以与JSFiddle不同的方式进行此操作。

我怎样才能避免行出现奇怪的行为？我确信我正在以糟糕的方式做这张桌子，但我无法弄清楚如何正确地做到这一点。

提前致谢！

Answer 1

我认为你的表中只有太多行（你的表有4行，你的例子只有3行）。

<table>
  <tr>
    <td colspan="4" style="background-color:red">Name</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="3" style="background-color:blue">Description</td>
  </tr>  <!-- remove this line -->
  <tr>  <!-- remove this line -->
    <td colspan="2" style="background-color:green">Option 1</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:yellow">Option 2</td>
  </tr>
</table>

<table>
  <tr>
    <td colspan="2" style="background-color:red">Name</td>
  </tr>
  <tr>
    <td rowspan="2" style="background-color:blue">Description</td>
    <td style="background-color:green">Option 1</td>
  </tr>
  <tr>
    <td style="background-color:yellow">Option 2</td>
  </tr>
</table>

创建表格时如何避免“奇怪”的行？

1 个答案: