html - Bootstrap 定制

Question

我想制作(好吧..正在制作..)一个标签页。我用 border-top:none 属性制作了一个“选项卡框”，所以它看起来像是选项卡的一部分，在里面我有一个表格。

我想知道，有没有办法删除表格标题的所有边框(底部除外)，但保留所有表格数据单元格的所有周围边框？表格标题边框与我创建的选项卡框的“无缝”方面相冲突。这是我的代码(使用 bootstrap 3)。如果您知道任何可以替代所有这些的类，那很好，如果不知道，一些 CSS 指导将是异常(exception)。

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