举表列跨度行跨度问题

问题描述：

我曾尝试下面的代码，但它不工作：

<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>

您包含的图像无效。你可以[编辑你的问题]（https://stackoverflow.com/posts/46682643/edit）来描述你正在尝试做什么，所以我们理解这个问题并且可以帮助解决它？ – FluffyKitten

答

替换您<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>

答

为了达到你的表头所需的分割，你需要基本上在头部创建一个新的表格，并划分出一个表格。

你<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提出的解决方案。

举表列跨度行跨度问题

相关推荐