Пространство между рядами таблицы с закругленными углами

Question

У меня маленькая проблема. Я хочу получить пространство между строками таблицы и чтобы строки имели закругленные углы. Я могу получить пространство с помощью border-collapse, но тогда я не смогу получить строки с закругленными углами.

Я пробовал радиус границы, но он просто не будет работать.

Есть ли способ заставить обе эти вещи работать?

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;
}

Строки должны выглядеть так:

Answer 1

Вы можете установить все, что хотите, чтобы стилизовать его .... (например, 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>

Answer 2

Я предлагаю вам сделать такую ​​вещь:

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>

Работает для любого числа td ячеек на tr.

Надеюсь, это поможет.

Answer 3

Вам нужно будет применить стиль border-radius к элементам td, border-radius не работает с элементами tr. Если ваши строки состоят из нескольких ячеек, вы можете использовать td: first-child и td: last-child, чтобы придать стилю первую и последнюю ячейки с радиусом границы и оставить остальные без округленных границ.