带圆角和行分隔符的HTML / CSS表？

Question

我想制作一个带有圆角和行分隔符的HTML表格。

但是，看起来它们是互斥的：

• 行分隔线tr {border-bottom: 1px solid #000000}要求 border-collapse: collapse工作

• 表圆角table { border-radius: 4px }不适用于 border-collapse: collapse

我该如何实现？

Answer 1

您可以将table包裹在一个div中，并为该div分配一个border-radius加overflow:hidden。

一个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元素。