Top spacing of row with background-color

Question

I have a table with a first and a last row with background-color which I would like to have a space with their previous rows.

This is my code:

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>

So I would like to have a white space between the blue border-bottom of the thead and the first gray row. Also between the last gray row and the previous dashed gray border-bottom. How can I do that?

Try to this solution may be helpful to you. HTML: "" CSS: border-collapse: collapse; remove it. — Sunil Boricha, Aug 24 '17 at 08:31
Solution 2: Add in css: border-collapse: separate; border-spacing: 10px; — Sunil Boricha, Aug 24 '17 at 08:43

score 1 · Answer 1 · answered Aug 24 '17 at 08:43

1

Refer this link Spacing between thead and tbody

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

answered Aug 24 '17 at 08:43

Lavanya E

206
2
12

This works for the first gray row. How can I do it for the last gray row? – igogra Aug 24 '17 at 10:23

Amal · Accepted Answer · 2017-08-24T11:21:54.853

Hope this helps

change border-collapse: collapse; to border-collapse: separate; and add border-spacing 0 border-spacing.Then apply border-top: 4px solid #fff; for 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>

that adds a space between all rows. I only want it for the gray ones. — igogra, Aug 24 '17 at 10:12

Top spacing of row with background-color

2 Answers2