html - 带有圆角和行分隔符的 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-radiusplus overflow:hidden。

Adiv是一个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 元素中，然后将边框半径添加到 div 元素。