Space between table rows with rounded corners - html

Question

I have a little problem. I want to get space between table rows and that rows had rounded corners. I can get space with border-collapse, but then I won't be able to get rows with rounded corners.
I have tried border-radius but it just won't work.
Is there any way to get these both things to work?
th {
background-color: black;
color: dimgray;
}
td {
padding-bottom: 10px;
color: whitesmoke;
font-weight: bold;
}
/*
table {
border-collapse: separate;
border-spacing: 0 1em;
}
*/
tr {
border-radius: 10px;
}
Rows should look like that:

Answer 1

I suggest you to do that kind of thing:
table {
border-collapse: separate;
border-spacing: 0 10px;
text-align: center;
}
table td {
background: #ccc;
width: 160px;
height: 30px;
}
table td:first-of-type{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
table td:last-of-type{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
It works for any number of td cells per tr.
Hope it helps.

Answer 2

You'll need to apply the border-radius style to the td elements, border-radius doesn't work on tr elements.
If your rows are made up of multiple cells, you can use td:first-child and td:last-child to style the first and last cells with a border-radius and leave the rest without rounded borders.

Answer 3

You can set whatever you want to style it.... (like width,height,background-color ...)
table{
border-collapse: separate;
border-spacing: 10px 20px;
}
table td,table th {
border: 1px solid black;
width:100px;
height:50px;
border-radius:10px;
}
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>