如何使用CSS删除表格中相互重叠的边框

holgip5t 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(140)

我已经创建了表格，但在两个单元格相交的地方，边框较暗且较厚。我该如何解决此问题？这是我的CSS代码。

.custom-table-2 {
  border-collapse: separate;
  /*border-collapse: collapse;*/
  border-spacing: 0;
}

.custom-table-2 td {
  border: 1px solid #00953B;
}

.custom-table-2 tr:first-child td:first-child {
  border: 0px;
}

.custom-table-2 tr:nth-child(2) td:first-child {
  border-top-left-radius: 16px;
}

.custom-table-2 tr:first-child td:nth-child(2) {
  border-top-left-radius: 16px;
}

.custom-table-2 tr:first-child td:last-child {
  border-top-right-radius: 16px;
}
.custom-table-2 td:nth-child(2) {
  background-color: #7CCB99;
}

字符串
Image of the table
如果我使用'border-collapse：折叠;'，它不会变厚，但边界半径不会显示。有什么解决办法吗？

css

来源：https://stackoverflow.com/questions/76836333/how-to-remove-borders-that-overlap-each-other-in-a-table-with-css

1条答案

按热度按时间

dtcbnfnu1#

为<td>设置单独的边框，而不是速记：

table {
  border-collapse: separate;
  border-spacing: 0;
}

table td {
  border-left: 1px solid #00953B;
  border-top: 1px solid #00953B;
  padding: 20px;
}

table td:last-child {
  border-right: solid 1px #00953B;
}

table tr:last-child td {
  border-bottom: solid 1px #00953B;
}

table tr:first-child td:first-child {
  border: 0px;
}

table tr:nth-child(2) td:first-child {
  border-top-left-radius: 16px;
}

table tr:first-child td:nth-child(2) {
  border-top-left-radius: 16px;
}

table tr:first-child td:last-child {
  border-top-right-radius: 16px;
}

table td:nth-child(2) {
  background-color: #7CCB99;
}

个字符

赞(0）回复(0）举报 2023-08-09

我来回答

如何使用CSS删除表格中相互重叠的边框

1条答案

相关问题

热门标签

最新问答