2016-04-14 5 views
0

境界線付きのブートストラップ3テーブルを使用したいと思います。たとえば、class="table table-bordered"を使用して、セル間に境界線を作成します。表の外側ブートストラップ3外枠なしで表の境界になっています

私は次のように試してみましたが、それは両側でうまくいくようですが、theadtfootはオプションの要素であると考えて、上端と下端の潜在的な境界を処理する良い方法は考えられません。私は、これらのシナリオを説明する強力なものを作り、再利用の可能性を最大化することを望んでいました。

.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ソリューションがありますか?

答えて

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; 
} 
関連する問題