twitter-bootstrap Bootstrap 表 - 将行的一列一分为二
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32358270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap table - split one of the row's column in two
提问by Amir
I managed to create 'double row' for a table in Bootstrap:
我设法在 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>
Ideally I want it to look like this:
理想情况下，我希望它看起来像这样：
Playing around with colspandidn't really help, only broke things. I tried to set colspanof every row's first column to 2 and the one of B to 1, and have additional <td>for B1 and B2, didn't work.
玩弄colspan并没有真正的帮助，只会破坏东西。我试图将colspan每一行的第一列设置为 2，将 B 中的一列设置为 1，并<td>为 B1 和 B2设置额外的列，但没有用。
回答by Ramiz Wachtler
Finally I've got a solution for you :
最后，我为您提供了一个解决方案：
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>