Bootstrap表colspan行跨问题
Bootstrap表colspan行跨问题
提问于 2017-10-11 15:47:39
我想创建我的表来工作，如下所示：
我已经尝试了以下代码，但它不起作用：
<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-11 15:55:41
将<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>Stack Overflow用户
发布于 2017-10-11 17:58:34
为了在表头中实现所需的划分，基本上需要在表头中创建一个新表并对其进行划分。
您的<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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46682643
复制相关文章
相似问题
腾讯云开发者
