Html Rowspan放在首位

Question

我只想询问我是否可以将<td>置于顶部，因为我在<td>上使用了行数。请参阅下面的示例。

这是我的代码：

<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 td移到一个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>
    <td rowspan="2" style="vertical-align:top">February</td>
    <td rowspan="2" style="vertical-align:top">$80</td>
  </tr>
  <tr class="rowsl">
    
  </tr>

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

</table>

Answer 2

不确定我的答案是你在找什么：

＆＃13;

＆＃13;

<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>
    <td>February</td>
    <td>$80</td>
  </tr>
  
  <tr class="rowsl">
  </tr>

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

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我看到的唯一方法是将它放在同一行，但是你将拥有相同的高度：

  <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> 
            <td rowspan="2" >February</td>
            <td rowspan="2" >$80</td>
         </tr>

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

Answer 4

您也可以编写如下代码，

＆＃13;

＆＃13;

<table border=1>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th rowspan="2">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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你有多种解决方案。

我的主要建议是删除所有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，并且可能会对它进行一些样式化，例如： / p>

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>