Bootstrap 4 - 如何添加多个标题，每个标题有多个列？答案

【问题标题】：Bootstrap 4 - How to add multiple headers with multiple columns per header?Bootstrap 4 - 如何添加多个标题，每个标题有多个列？
【发布时间】：2018-06-16 14:38:58
【问题描述】：

我正在处理一个顶部有多个列标题的输入表单。在每个日期标题（下面的 codepen）下，需要有四列。我似乎可以做到这一点的唯一方法是不使用<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>

【问题讨论】：

如果您使用的是 Bootstrap，为什么要使用表格？使用内置的网格系统。

标签： twitter-bootstrap html-table bootstrap-4

【解决方案1】：

这样做是有效的。您可以使用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>

【讨论】：