带背景色的行的顶部间距答案

【问题标题】：Top spacing of row with background-color带背景色的行的顶部间距
【发布时间】：2018-02-02 00:50:45
【问题描述】：

我有一个表，第一行和最后一行都带有背景色，我希望它们的前一行有一个空间。

这是我的代码：

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;
}

<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>

所以我想在头的蓝色边框底部和第一个灰色行之间留一个空白。也在最后一个灰色行和前一个灰色虚线底部之间。我该怎么做？

【问题讨论】：

试试这个解决方案可能对你有帮助。 HTML: "" CSS:border-collapse:collapse;删除它。

解决方案2：在css中添加：border-collapse:separate；边框间距：10px;

标签： css

【解决方案1】：

参考此链接Spacing between thead and tbody

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

【讨论】：

这适用于第一行灰色。我该如何处理最后一个灰色行？

【解决方案2】：

希望对你有帮助

将border-collapse: collapse;更改为border-collapse: separate;并添加边框间距0border-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>

【讨论】：

在所有行之间添加一个空格。我只想要灰色的。