舉表列跨度行跨度問題

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，直到結果看起來剛剛好，你想用的margin，padding，邊框寬度和篡改。這是一個codepen提出的解決方案。