HTML / CSS Таблица с закругленными углами и разделителями строк?

Question

Я хотел бы создать таблицу HTML с закругленными углами и разделителями строк .

Однако похоже, что они взаимоисключающие:

• строк-разделителей tr {border-bottom: 1px solid #000000} требуется border-collapse: collapse на работу

• скругленные углы стола table { border-radius: 4px } не работают с border-collapse: collapse

как мне этого добиться?

Answer 1

Вы можете обернуть table внутри элемента div и присвоить этому элементу border-radius плюс overflow:hidden.

A div является элементом block, поэтому я использовал display:tableна нем должна быть ширина стола.Но вы можете использовать inline-block или другие.

См. Ниже

td {
  padding: 10px;
  background: red;
}

tr {
  border-bottom: 2px solid #000000;
}

table {
  border-collapse: collapse;
}

.wrapper {
  border-radius: 10px;
  border: 2px solid green;
  display: table;
  overflow: hidden;
}

<div class="wrapper">
  <table>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

Answer 2

не добавляет радиус границы к самой таблице.попытайтесь обернуть таблицу внутри элемента div, затем добавьте border-radius к элементу div.