html中table四角圆弧,table设置圆角的两种方式

最新推荐文章于 2025-10-13 17:54:52 发布

转载最新推荐文章于 2025-10-13 17:54:52 发布 · 8.9k 阅读

标签

本文介绍了如何在CSS中解决表格`border-radius`不生效的问题，由于`border-collapse: collapse`与`border-radius`不兼容，我们需要将`border-collapse`设置为`separate`。并提供了两种实现圆角表格的方法，包括直接修改表格样式和使用外层div包裹。同时，详细展示了消除多余单元格边框的技巧，确保表格样式美观完整。

默认代码

table {

width: 100%;

background-color: yellowgreen;

text-align: center;

}

表头1	表头2	表头3
1	2	3
4	5	6

复制代码

原因

如果我们直接对table设置border-radius是不会生效的，因为table的默认属性border-collapse值为collapse。border-collapse:collapse和border-radius不兼容。因此，我们需要将border-collapse的值设置为separate即可。

第一种方式

我们对上面的默认代码做如下更新

table {

....

border-collapse: separate;

border-spacing: 0;

border-radius: 10px;

border: solid 2px #dfdfdf;

}

复制代码

效果如图

通常情况下我们会给表格设置border来显示单元格大小

td, th {

border-right: 2px solid #1E90FF;

height: 30px;

text-align: center;

}

td {

border-top: 2px solid #1E90FF;

}

td:last-child, th:last-child {

border-right-color: transparent;

}

复制代码

第二种方式

我们可以给table外再套上一层div

div样式如下

div {

width: 100%;

border-radius: 10px;

overflow: hidden;

}

复制代码

但这样并不能做到最好效果， look

我们可以看到四个边角并不完美，我们需要让table继承div的border-radius

改造代码如下

div {

width: 100%;

border-radius: 10px;

overflow: hidden;

}

table {

background-color: yellowgreen;

width: 100%;

text-align: center;

border-spacing: 0;

border-radius: inherit;

border: solid 2px #dfdfdf;

}

复制代码

当当当！！！

如果我们此时给table设置一下单元格的border属性

td, th {

border: 2px solid #1E90FF;

height: 30px;

text-align: center;

}

复制代码

如何消除多余的单元格线条呢？

td {

border-top: 2px solid #1E90FF;

height: 30px;

text-align: center;

}

th, td {

border-right: 2px solid #1E90FF;

}

th:last-child, td:last-child {

border-right-color: transparent;

}

复制代码