Html Rowspan 置顶

Question

我只是想问一下我是否可以把<td>在顶部，因为我在 <td> 上使用了一个 rowspan .请参阅下面的示例。

这是我的代码:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>

  <tr>
    <td  rowspan="2">
    <div>January</div>
    <div>test</div>
    <div>test</div>
    </td>
  </tr>
  <tr class="rowsl">
    <td>February</td>
    <td>$80</td>
  </tr>

    <tr>
    <td  rowspan="2">January</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>

</table>

我想像图片这样:

Answer 1

您有多种解决方案。

我的主要建议是删除所有 rowspan 和多个 tr。
在下面的代码片段中查看我更改为注释的代码:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>

  <tr>
    <td><!-- rowspan="2"-->
      <div>January</div>
      <div>test</div>
      <div>test</div>
    </td>
  <!--/tr>
  <tr class="rowsl"-->
    <td>February</td>
    <td>$80</td>
  </tr>

  <tr>
    <td><!-- rowspan="2"-->January</td>
  <!--/tr>
  <tr-->
    <td>February</td>
    <td>$80</td>
  </tr>

</table>

从上面的代码片段中，如果您需要在 td 中添加行，您可以像本月所做的那样添加 div，并可能将其样式化为一点点，像那样:

td div {
  border-bottom: 1px solid black;
}


/* Or use the one below if you don't want the first column to be stylized

td:not(:first-child) div {
  border-bottom: 1px solid black;
}

*/

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>
      <div>January</div>
      <div>test</div>
      <div>test</div>
    </td>
    <td>
      <div>February</div>
      <div>test</div>
      <div>test</div>
    </td>
    <td>
      <div>$80</div>
      <div>test</div>
      <div>test</div>
    </td>
  </tr>
  <tr>
    <td>January</td>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

或者，您可以执行以下操作，保留 rowspan 并添加空的 td，这将使您的表结构保持一致:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>

  <!-- Do the following -->
  <tr>
    <td rowspan="2">
      <div>January</div>
      <div>test</div>
      <div>test</div>
    </td>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
  </tr>

  <tr>
    <td>January</td>
    <td>February</td>
    <td>$80</td>
  </tr>

</table>