将列合并到 Html 表中的行中答案

【问题标题】：Merge Column Into Rows In Html Table将列合并到 Html 表中的行中
【发布时间】：2019-12-01 21:07:43
【问题描述】：

用于构建 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>

【问题讨论】：

标签： html asp.net-mvc html-table bootstrap-4

【解决方案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>

【讨论】：

对不起...不想使用 style="width: 100px;"。所以我编辑了我的代码..请再看一遍。
我已经更新了代码。我删除了 thead 和 tbody 标记，以允许应用行跨度。由于您的第一行跨越到表格的底部，因此您不能将其视为标题行。
我想使用引导类来增加宽度。不想使用宽度 =“300”。

【解决方案2】：

我在 css 文件中应用了引导 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文件中添加width属性-

.w-70 {
 width: 70%;
 }

【讨论】：