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

クラスを削除してから.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 に答える
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/

于 2013-10-03T20:53:35.460 に答える