0

我正在寻找（嗯..在制作过程中..）一个标签页。我用border-top: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>

请注意，我只是为了简洁的代码而删除了表格内容，我只是保留了结构。

4

2 回答 2

1

我认为这是您正在寻找的CSS：

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

这应该从 table 和 th 元素中删除顶部、左侧和右侧边框。

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

于 2013-10-03T20:53:35.460 回答
1

我会放弃.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

于 2013-10-03T20:57:24.147 回答