Css table 圆角处理

最新推荐文章于 2023-07-06 16:36:02 发布

ChasingCode

最新推荐文章于 2023-07-06 16:36:02 发布

阅读量590

点赞数 2

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_62367247/article/details/124648474

版权

CSS border-radius 前端开发表格样式圆角

关键词由CSDN通过智能技术生成

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table td {
  border: 1px solid rgb(226, 226, 226);
  border-left: none;
  border-bottom: none;
  padding: 5px;
}

table tr:first-child td:first-child {
  border-top-left-radius: 5px; /* 设置table左下圆角 */
}

table tr:first-child td:last-child {
  border-top-right-radius: 5px; /* 设置table右下圆角 */
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 5px; /* 设置table左下圆角 */
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 5px; /* 设置table右下圆角 */
}

table tr td:first-child {
  border-left: 1px solid rgb(226, 226, 226);
}

table tr:last-child td {
  border-bottom: 1px solid rgb(226, 226, 226);
}

caution

table的border须为 border-collapse: separate;否则border-radius不生效