我设法为Bootstrap中的表创建“双行”：
<table class="table table-striped table-bordered">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>B1</td>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
<td>B2</td>
</tr>
</table>
玩colspan并没有真正帮助,只是打破了东西.我尝试将每行的第一列的colspan设置为2,将B的一个设置为1,并且还有其他< td>对于B1和B2,没有用.
解决方法
最后,我有一个解决方案：
SNIPPET
.container {
background-color: #ccc;
}
thead{
background:#C9E4F4;
}
table,th,td {
text-align: center !important;
border: 1.5px solid #929292 !important;
}
#text1 {
background-color: #cac;
}
#text2 {
background-color: #cca;
}
#navigation {
background-color: #acc;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<thead>
<th colspan="2">1</th>
<th>2</th>
<th>3</th>
</thead>
</tr>
<tr>
<td colspan="2">A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>B1</td>
<td>B1</td>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
<td>B2</td>
<td>B2</td>
</tr>
</table>
