本文将探讨在css中使用 `border-collapse: separate` 和 `border-spacing` 为html表格创建行间距时，`border-radius` 属性在 `
理解 border-collapse: separate 与 border-radius 的冲突
在Web开发中，我们经常需要为表格添加样式，使其更具视觉吸引力。其中一个常见的需求是为表格行（
然而，当尝试直接将 border-radius 属性应用于
考虑以下初始代码示例，它尝试为表格行设置圆角和间距：
| Company | Progress | Location | Payment | |
|---|---|---|---|---|
| Time Developments | [email protected] | In Progress | You48 | $200 |
/* 初始CSS样式 */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;
color: #2E384D;
background-color: #F5F7FC;
}
table {
width: 70vw;
border-collapse: separate; /* 允许行间距 */
border-spacing: 0 15px; /* 设置垂直行间距 */
}
tr:nth-child(even) {
background-color: white;
}
tr:nth-child(odd) {
background-color: #f1f2f6;
}
tr {
border: 1px solid black;
border-radius: 15px; /* 此处设置的圆角不会生效 */
}
th {
background-color: #FFFFFF;
background-color: #2B59FF;
color: white;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}
td {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 15px;
font-weight: 100;
}在此示例中，尽管为
解决方案：将圆角应用于单元格边缘
解决此问题的关键在于理解表格渲染的机制：实际
