Spaced rows table

by cahnory

HTML

<table class="table">
    <tr class="table__row">
        <td class="table__cell">A<br />dz</td>
        <td class="table__cell">B</td>
        <td class="table__cell">C</td>
        <td class="table__cell">D</td>
        <td class="table__cell --last">E</td>
    </tr>
    <tr class="table__row">
        <td class="table__cell">A<br />dz</td>
        <td class="table__cell">B</td>
        <td class="table__cell">C</td>
        <td class="table__cell">D</td>
        <td class="table__cell --last">E</td>
    </tr>
    <tr class="table__row">
        <td class="table__cell">A<br />dz</td>
        <td class="table__cell">B</td>
        <td class="table__cell">C</td>
        <td class="table__cell">D</td>
        <td class="table__cell --last">E</td>
    </tr>
    <tr class="table__row">
        <td class="table__cell">A<br />dz</td>
        <td class="table__cell">B</td>
        <td class="table__cell">C</td>
        <td class="table__cell">D</td>
        <td class="table__cell --last">E</td>
    </tr>
</table>

SCSS

.table {
    border-spacing: 0 6px;
    min-width: 100%;
}
.table__cell {
    border: 1px solid #999;
    border-right-color: #EEE;
    border-left: none;
    padding: .25em .5em;
    vertical-align: top;
    
    &:first-child {
        border-left: 1px solid #999;
        border-radius: 3px 0 0 3px;
    }
        
    &:last-child {
        border-right: 1px solid #999;
        border-radius: 0 3px 3px 0;
    }
    // IE8
    &.\--last {
        border-right: 1px solid #999;
        border-radius: 0 3px 3px 0;
    }
}
.table__row:nth-child(2n) {
    background: #F7F7F7;
}