0

を使用して、境界線のあるブートストラップ 3 テーブルを使用したい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 に答える