javascript - 通过 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/