我正在处理一个输入表单，顶部有多个列标题。在每个日期标题下面（下面的代码集），需要有四列。我似乎唯一能做到这一点的方法是不使用<tbody>，只在<thead>空间中播放。
我的问题是这是否是正确的方法。如果我在<tbody>中添加列，它只会将所有行对齐到左侧，而不是跨越表格。
这里是 Codepen 。
<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>
答案 0 :(得分：0)
这样做是有效的。您可以使用w3-validator对其进行验证。但是，它没有意义。你可以使用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>