引导4-如何添加多个标题与多列的每个标题？
引导4-如何添加多个标题与多列的每个标题？
提问于 2018-06-15 20:49:50
我正在处理一个输入表单，顶部有多个列标题。在每个日期头下(下面是代码页)，需要有四列。唯一能做到这一点的方法是不使用<tbody>，而只在<thead>空间中播放。
我的问题是，这是否正确的做法。如果我在<tbody>中添加列，它只会将所有行对齐到左边，而不是跨表对齐。
这是科德芬。
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col" class="text-center name">Students</th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
</tr>
<tr>
<th><input type="text" class="form-control" placeholder="Student Name"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
<th><input type="text" class="form-control" placeholder="#"></th>
</tr>
</thead>
</table>回答 1
Stack Overflow用户
发布于 2018-06-16 06:38:58
这样做是有效的。您可以使用W3-验证器验证它。然而，这是毫无意义的。你可以用tbody>tr>td。我看不出有什么问题。
https://codepen.io/anon/pen/jKGXBp
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-dark table-responsive">
<thead>
<tr>
<th scope="col" class="text-center name">Students</th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
<th colspan="4" scope="col" class="text-center"><input class="form-control" type="date"></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" placeholder="Student Name"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
</tr>
<tr>
<td><input type="text" class="form-control" placeholder="Student Name"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
</tr>
<tr>
<td><input type="text" class="form-control" placeholder="Student Name"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
</tr>
<tr>
<td><input type="text" class="form-control" placeholder="Student Name"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
</tr>
<tr>
<td><input type="text" class="form-control" placeholder="Student Name"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
<td><input type="text" class="form-control" placeholder="#"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50882490
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号