0

我想使用带有边框的 bootstrap 3 表格，例如 using class="table table-bordered"，这样我将在单元格之间设置边框，但我不希望表格外部有任何边框。

thead我尝试了以下方法，它似乎对侧面效果很好，但考虑到它tfoot是可选元素，我想不出一种很好的方法来处理潜在的顶部和底部边框。我希望能做出一些强大的东西来解决这些情况，最大限度地提高再利用潜力。

.table-bordered.no-outside-borders {
    border: none;
}

.table-bordered.no-outside-borders>thead>tr>td:first-child,
.table-bordered.no-outside-borders>thead>tr>th:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>th:first-child {
    border-left: none;
}

.table-bordered.no-outside-borders>thead>tr>td:last-child,
.table-bordered.no-outside-borders>thead>tr>th:last-child,
.table-bordered.no-outside-borders>tfoot>tr>td:last-child,
.table-bordered.no-outside-borders>tfoot>tr>th:last-child,
.table-bordered.no-outside-borders>tbody>tr>td:last-child,
.table-bordered.no-outside-borders>tbody>tr>th:last-child {
    border-right: none;
}

这里有一个不错的 CSS 解决方案吗？

4

1 回答 1

0

我昨天遇到了同样的问题，我用的css代码是：

    .table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
    border: none;
    max-height: 200px; 
    font-size: 20px;

    border-right: 1px solid gray;
    border-collapse: collapse;
}
.table.table-borderless {


    border-right: 1px solid gray;
    border-collapse: collapse;
    max-height: 200px; 
    font-size: 20px;
}
于 2016-04-14T09:23:05.743 回答