Bootstrap表格的colspan和rowspan问题

Question

我希望创建的表格能够像这样工作： 我尝试了以下代码，但它并不起作用：

<section class="signa-table-section clearfix">
   <div class="container">
      <div class="row">
         <div class="col-lg">
            <table class="table table-responsive table-bordered">
               <thead>
                  <tr>
                     <th>Entry</th>
                     <th>Sl</th>
                     <th colspan="3">Tp</th>
                     <th>Tp</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                     <td>Mark</td>
                     <td>Otto</td>
                  </tr>
                  <tr>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                     <td>Mark</td>
                     <td>Otto</td>
                  </tr>
                  <tr>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                     <td>Mark</td>
                     <td>Otto</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
</section>

- webmarjan

---

你附加的图片无法显示。请编辑您的问题以描述您正在尝试做什么，以便我们理解问题并帮助解决它。点击此处进行编辑。 - FluffyKitten

Answer 1

将以下内容替换到您的<thead>中:

<tr>
   <th rowspan="2">Entry</th>
   <th rowspan="2">Sl</th>
   <th colspan="3">Tp</th>
</tr>
<tr>
   <th>Tp</th>
   <th>Tp</th>
   <th>Tp</th>
</tr>

- GGO

Answer 2

为了在表头内实现所需的分割，您需要基本上在表头内创建一个新表并将其分割。

您的 <th> 将如下所示：

<th colspan="3" class="custom-header">
    <table class="table table-responsive">
        <thead>
            <tr>
                <th colspan="3" class="last">Tp</th>
            </tr>
            <tr>
                <th>Tp1</th>
                <th>Tp2</th>
                <th class="last">Tp3</th>
            </tr>
        </thead>
    </table>
</th>

然后你需要通过CSS调整，直到结果看起来完美无缺。你需要更改 margin、padding、border和width等样式属性。这里有一个 codepen链接，提供了一种解决方案。

- Ghassen Louhaichi