空白と境界線を下に追加して

Question

私はテーブルを持っています。私はスペースと境界線を持つ行が必要です。このよう

：

私は偽白ボーダーと黒の背景を持つ「スペーサー行」でそれを修正しようとしたが、私は正しく表示されません。

table { 
 
    border-collapse:collapse; 
 
} 
 
td { 
 
    padding:1em 2em; 
 
    background-color:#ccc; 
 
    border-top:10px solid white; 
 
    border-bottom:10px solid white; 
 
    border-right:4px solid white; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
} 
 
tr:first-child td {border-top:0} 
 
td:last-child {border-right:0} 
 

 
tr.spacer { 
 
    height:1px; 
 
    background-color:black; 
 
    border:1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td>Four</td> 
 
    </tr> 
 
    <tr class="spacer"></tr> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td>Four</td> 
 
    </tr> 
 
    <tr class="spacer"></tr> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td>Four</td> 
 
    </tr> 
 
</table> 
 

任意のアイデア？クイックフィックスとして

Answer 1

いくつかのダミーコンテンツを追加し、それを揃えるために:afterを使用してみてください：

td:after { 
    content: 'border'; 
    position: absolute; 
    bottom: -5px; 
    background: red; 
    width: 105%; 
    left: 0px; 
    text-indent:-9999px; 
    height:1px; 
} 

あなたは<td>のposition:relativeようにする必要があります。

それをチェックアウト - 私はボーダーとして背景テーブルの色を置くことによって達成したhttps://jsfiddle.net/2j6jqkx2/1/

Answer 2

、してみてください...

tr{ 
padding-bottom: 10px; 
margin-bottom:10px; 
border-bottom: 1px solid grey; 
float: left;} 

ああとTRのスペーサ要素を取り除きます。

Answer 3

。そして、 '行のスペーサー'の高さは、偽の枠線に1pxを加えた高さと同じです。

table { 
 
    border-collapse:collapse; 
 
    background-color:black 
 
} 
 
td { 
 
    padding:1em 2em; 
 
    background-color:#ccc; 
 
    border-top:10px solid white; 
 
    border-bottom:10px solid white; 
 
    border-right:4px solid white; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
} 
 
tr:first-child td {border-top:0} 
 
td:last-child {border-right:0} 
 

 
tr.spacer { 
 
    height:11px; 
 
}

<table> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td>Four</td> 
 
    </tr> 
 
    <tr class="spacer"></tr> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td>Four</td> 
 
    </tr> 
 
    <tr class="spacer"></tr> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td>Four</td> 
 
    </tr> 
 
</table>