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

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

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

• 行分隔符

  tr{border bottom:1px solid#000000}

  require

  边框折叠：折叠

  才能工作

• 表圆角

  表{边框半径：4px}

  不适用于

  边框折叠：折叠

---

如何实现这一点？

不要将边框半径添加到表格本身。尝试将表格包装在div元素内，然后将边框半径添加到div元素。

您可以将

表格

包装在div内，并为该div指定一个

边框半径

加上

溢出：隐藏

一个

div

是一个

块

元素，所以我在它上面使用了

display:table

来表示表格的宽度。但您可以使用

内联块

或其他

见下文

td{
填充：10px；
背景：红色；
}
tr{
边框底部：2倍实心#000000；
}
桌子{
边界塌陷：塌陷；
}
.包装纸{
边界半径：10px；
边框：2倍纯绿；
显示：表格；
溢出：隐藏；
}

那么您想让边框到行，让边框半径到表？或者边界半径也到行？边界半径仅到表；对于行，我想要一条直线来划分them@DanieleB很高兴我能帮忙。干杯D