通过Twitter Bootstrap将“快照”表格放在一起

Question

是否可以将一个表格“捕捉”到另一个表格的底部，同时保留table-bordered个功能（例如圆边）。

期望的效果显示两张桌子“拼凑”在一起：

圆角不在拍摄中，但你明白了。

Answer 1

据我所知，在TB中没有这样的东西可用，但没有什么能阻止你编写自己的CSS，并覆盖TB样式。那就是css的美丽！

如果您使用Chrome Inspector等检查代码，则可以轻松复制应用的TB样式，并根据您的意愿进行更改。这正是我所做的，这就是我提出的（没有前缀！）：

table.table-snap {
    margin-bottom: 0;
    border-bottom-width: 0;
}
table.table-bordered.table-snap:last-child {
    border-bottom-width: 1px;
    margin-bottom: 20px;
}
.table-bordered.table-snap > thead > tr > th, 
.table-bordered.table-snap > tbody > tr > td, 
.table-bordered.table-snap > tfoot > tr > td, 
.table-bordered.table-snap {
    border-radius: 0 !important;
}
.table-bordered.table-snap:first-child thead:first-child tr:first-child > th:first-child, 
.table-bordered.table-snap:first-child tbody:first-child tr:first-child > td:first-child, 
.table-bordered.table-snap:first-child tbody:first-child tr:first-child > th:first-child,
.table-bordered.table-snap:first-child {
    border-top-left-radius: 4px !important;
}
.table-bordered.table-snap:first-child thead:first-child tr:first-child > th:last-child, 
.table-bordered.table-snap:first-child tbody:first-child tr:first-child > td:last-child, 
.table-bordered.table-snap:first-child tbody:first-child tr:first-child > th:last-child,
.table-bordered.table-snap:first-child {
    border-top-right-radius: 4px !important;
}
.table-bordered.table-snap:last-child thead:last-child tr:last-child > th:first-child, 
.table-bordered.table-snap:last-child tbody:last-child tr:last-child > td:first-child, 
.table-bordered.table-snap:last-child tbody:last-child tr:last-child > th:first-child,
.table-bordered.table-snap:last-child {
    border-bottom-left-radius: 4px !important;
}
.table-bordered.table-snap:last-child thead:last-child tr:last-child > th:last-child, 
.table-bordered.table-snap:last-child tbody:last-child tr:last-child > td:last-child, 
.table-bordered.table-snap:last-child tbody:last-child tr:last-child > th:last-child,
.table-bordered.table-snap:last-child {
    border-bottom-right-radius: 4px !important;
}

您现在需要做的就是将.table-snap课程应用于您想要“抓住”其兄弟姐妹的每个表格，并且您应该得到您想要的结果：http://jsfiddle.net/ycTj8/