Bootstrap bảng - chia một trong những cột của hàng trong hai

Question

tôi cố gắng tạo ra 'hàng đôi' cho một bảng trong 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> 

Lý tưởng nhất là tôi muốn nó trông như thế này:

Chơi xung quanh với colspan đã không thực sự giúp đỡ, chỉ phá vỡ mọi thứ. Tôi đã cố gắng đặt colspan cột đầu tiên của mỗi hàng thành 2 và từ B đến 1 và có thêm <td> cho B1 và ​​B2, không hoạt động.

Answer 1

Cuối cùng tôi đã có một giải pháp cho bạn:

ĐOẠN

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