Assuming your table
's html resembles the following:
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row one, cell one</td>
<td>Row one, cell two</td>
</tr>
<tr>
<td>Row two, cell one</td>
<td>Row two, cell two</td>
</tr>
<tr>
<td>Row three, cell one</td>
<td>Row four, cell two</td>
</tr>
</tbody>
</table>
The the following CSS should work:
table {
border-spacing: 0;
}
th, td {
border: 1px solid #000;
padding: 0.5em 1em;
}
/* the first 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:first-child {
border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:last-child {
border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:first-child {
border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:last-child {
border-radius: 0 0 0.6em 0;
}
Edited in response to question from OP:
the border within the table is a little think, how do i make it 1px
The borders between cells are a little thick, because the left border of one cell is against the right border of the previous cells (and the same for top/bottom borders).
One way to remove that effect is to specify border-collapse: collapse;
on the table
element. Unfortunately the effect of this is to also remove/unset/override the border-radius
declarations: demo.
The more complicated way is to manually remove top-borders for rows with a previous row, and the left-border of a cell that follows a cell, adding the following to the previous CSS:
thead + tbody tr td,
tr + tr td {
border-top: 0;
}
tr th + th,
tr td + td {
border-left: 0;
}
Edited to reduce make the CSS more durable (for single-cell rows, for the addition of a tfoot
or the removal of the thead
):
table {
border-spacing: 0;
}
th, td {
border: 1px solid #000;
padding: 0.5em 1em;
}
thead tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
border-top-left-radius: 0.6em;
}
thead tr:first-child th:last-child,
tbody:first-child tr:first-child td:last-child {
border-top-right-radius: 0.6em;
}
thead + tbody tr:last-child td:first-child,
tfoot tr:last-child td:first-child {
border-bottom-left-radius: 0.6em;
}
thead + tbody tr:last-child td:last-child,
tfoot tr:last-child td:last-child {
border-bottom-right-radius: 0.6em;
}
thead + tbody tr td,
tfoot + tbody tr td,
tfoot tr td,
tbody + tbody tr td,
tr + tr td {
border-top: 0;
}
tr th + th,
tr td + td {
border-left: 0;
}
There is a problem with multiple tbody
elements, in the absence of a tfoot
element, currently in which the first tbody
will retain the border-radius on their lower borders.