TestBase

Fork it to create test

by balintbako

HTML

<table class="roundedTable">
    <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

CSS

table.roundedTable {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 350px;
}
table.roundedTable tr th, table.roundedTable tr td {
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 5px;
}
table.roundedTable th:first-child, table.roundedTable td:first-child {
    border-left: 1px solid #bbb;
}
table.roundedTable tr th {
    background: #eee;
    border-top: 1px solid #bbb;
    text-align: left;
}

/* top-left border-radius */
table.roundedTable tr:first-child th:first-child {
    border-top-left-radius: 6px;
}

/* top-right border-radius */
table.roundedTable tr:first-child th:last-child {
    border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table.roundedTable tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table.roundedTable tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}