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>

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>

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，直到结果看起来恰到好处，你想要篡改边距，填充，边框和宽度。这是一个codepen，其中包含一个建议的解决方案。

Bootstrap表colspan rowspan问题

2 个答案: