行的顶部间距与背景颜色

Question

我有一张带有背景颜色的第一行和最后一行的表格，我希望它的前一行有空格。

这是我的代码：

＆＃13;

＆＃13;

table {
    border-collapse: collapse;
}
thead > tr > th {
    font-size: 14px;
    color: blue;
    height: 44px;
    vertical-align: middle;
    text-align: left;
    padding: 0 10px;
    text-align: center;
    border: none;
    border-bottom: 1px solid blue;
    position: relative;
}
thead > tr > th:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 8px;
    bottom: 8px;
    width: 1px;
    border-left: 1px dashed blue;
}
thead > tr > th:last-child::after {
    border-left: none;
}
tbody > tr:first-child, tbody > tr:last-child {
    background-color: gray;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
    border-bottom: none;
    color: black;
}
tbody > tr > td {
    font-size: 12px;
    line-height: 14px;
    color: gray;
    height: 44px;
    vertical-align: middle;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px dashed gray;
    position: relative;
}
tbody > tr > td:first-child {
    color: black;
}
tbody > tr > td::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 8px;
    bottom: 8px;
    width: 1px;
    border-left: 1px dashed gray;            
}
tbody > tr > td:last-child::after {
    border-left: none;
}

＆＃13;

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>        
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>      
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

所以我想在thead的蓝色边框底部和第一个灰色行之间留一个空白区域。也位于最后一个灰色行和前一个虚线灰色边框底部之间。我怎么能这样做？

Answer 1

请参阅此链接Spacing between thead and tbody

tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}

Answer 2

希望这有帮助

将border-collapse: collapse;更改为border-collapse: separate;并添加边距0 border-spacing。然后将border-top: 4px solid #fff;应用于tbody > tr:first-child > td, tbody > tr:last-child > td。

table {
    border-collapse: separate;
    border-spacing: 0px;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
    border-bottom: none;
    color: black;
    border-top: 4px solid #fff;
}

table {
    border-collapse: separate;
    border-spacing: 0px;/* horizontal <length> | vertical <length> */
}
thead > tr > th {
    font-size: 14px;
    color: blue;
    height: 44px;
    vertical-align: middle;
    text-align: left;
    padding: 0 10px;
    text-align: center;
    border: none;
    border-bottom: 1px solid blue;
    position: relative;
}
thead > tr > th:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 8px;
    bottom: 8px;
    width: 1px;
    border-left: 1px dashed blue;
}
thead > tr > th:last-child::after {
    border-left: none;
}
tbody > tr:first-child, tbody > tr:last-child {
    background-color: gray;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
    border-bottom: none;
    color: black;
    border-top: 4px solid #fff;
}
tbody > tr > td {
    font-size: 12px;
    line-height: 14px;
    color: gray;
    height: 44px;
    vertical-align: middle;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px dashed gray;
    position: relative;
}
tbody > tr > td:first-child {
    color: black;
}
tbody > tr > td::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 8px;
    bottom: 8px;
    width: 1px;
    border-left: 1px dashed gray;            
}
tbody > tr > td:last-child::after {
    border-left: none;
}

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>        
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>
        <tr>
            <td>6546</td>
            <td>5654</td>
            <td>6454</td>
        </tr>      
    </tbody>
</table>