html - Bootstrap 表 - 将行的一列一分为二

Question

我设法在 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，没有用。

Answer 1

最后我有一个解决方案给你:

片段

.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>