在Html表格中将列合并为行

Question

用于构建HTML表的Rowspan和Colspan。

我希望单行中的前五列没有任何数据，如可编辑的图所示。，可以使用rowspan或colspan。

只有最后两列如可编辑的图所示。在这两列之前应该有一行，这是五列的组合，应该是空的。

​

​

 <div class="row">
   <div class="col-12">
   <table>
     <thead>
      <tr>
        <th>Savings for holiday!</th>
        <th>Date!</th>
        <th>Year</th>
        <th>Month</th>
        <th>Time</th>
        <th>Name</th>
        <th>Gender</th> 
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>$100</td>
        <td>10/10/2020</td>
        <td>2020</td>
        <td>January</td>
        <td>4:30pm</td>
        <td>hrishi</td>
        <td>male</td>
      </tr>
     </tbody>
    <tbody>
      <tr>
         <td>$100</td>
         <td>10/10/2020</td>
         <td>2020</td>
         <td>January</td>
         <td>4:30pm</td>
         <td>hrishi</td>
         <td>male</td>
        </tr>
    </tbody>
   </table>
 </div>
</div>

Answer 1

请参阅下面的代码。

   <table>
      <tr>
        <th colspan="5" rowspan="3" width="300"></th>
        <th>Name</th>
        <th>Gender</th> 
      </tr>
      <tr>
        <td>hrishi</td>
        <td>male</td>
      </tr>
      <tr>
         <td>hrishi</td>
         <td>male</td>
        </tr>
   </table>

Answer 2

我在css文件中应用了bootstrap css类，并得到了答案。

<table>
    <tr>
      <th colspan="5" rowspan="3" class="w-70"></th>
      <th>Name</th>
      <th>Gender</th> 
    </tr>
    <tr>
      <td>hrishi</td>
      <td>male</td>
    </tr>
    <tr>
      <td>hrishi</td>
      <td>male</td>
    </tr>
</table>

并在style.css文件中添加宽度属性-

.w-70 {
 width: 70%;
 }