BootStrap定制

Question

我想做(嗯.)在制作过程中)有标签的一页。我制作了一个带有边框顶部:none属性的“选项卡式框”，所以它看起来像是选项卡的一部分，里面有一个表。

我想知道，是否有一种方法可以移除表标题的所有边框(底部除外)，但在所有表数据单元格上保留所有周围的边框？表头边框与我创建的选项卡框的“无缝”方面相冲突。下面是我的代码(使用引导程序3)。如果您知道有任何类可以替换所有这些，那么很好，如果不是，一些CSS指导将是例外。

<div style="width:95%; margin:0 auto;">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#uno" data-toggle="tab">Tab 1</a></li>
        <li><a href="#dos" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tres" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="width:99.9%; margin:0 auto; outline: 1px solid #ddd">
        <div class="tab-pane fade active in" id="uno">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="tab-pane fade in"id="dos">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="tab-pane fade in" id="tres">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

请注意，我删除了表内容只是为了干净的代码，我只是留下了机智的结构。

Answer 1

我想这就是你要找的css：

table.table-bordered>thead>tr>th,
table.table-bordered {
    border-left:0;
    border-right:0;
    border-top:0;
}

这将从表和th元素中移除顶部、左侧和右侧边框。

JSFiddle：http://jsfiddle.net/jdwire/hc45U/8/

Answer 2

我将删除.table-bordered类，然后在除最后一个单元格之外的所有单元格上添加右边框。相关的CSS：

.table tbody tr td:not(:last-child),
.table thead tr th:not(:last-child) {
    border-right:1px solid #ddd;
}

一个工作示例：http://bootply.com/85323