原生html+css实现表格圆角效果

会不会惊动山神

于 2024-08-12 20:02:47 发布

阅读量1k

点赞数 9

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44528408/article/details/141140734

版权

有个需求需要用原生html+css的原生table标签实现圆角表格。
有的方式圆角会很模糊，或者有毛边，查找资料+调整后实现了这个功能。
实现效果：
请添加图片描述

代码：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      table {
     
        font-size: 16px;
        text-align: center;
        margin: 20px auto 0;
        border-collapse: separate;
        border-spacing: 0;
        border-top: 2px solid #333;
        border-radius: 12px;
      }

      table thead tr,
      table tbody tr {
     
        height