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>

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 。