table标签设置圆角效果

在使用有border的table时发现设置圆角无效；经过万能的度娘后查到：当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格
因此只能换种方式实现；下边是scss代码

#display-func-tab {
    border-collapse: separate;
    border-spacing: 0;
    th,
    td {
      height: 68px;
      border: 1px solid #e4e4e4;
      font-size: 14px;
    }
    thead {
      tr {
        height: 47px;
        color: rgba(0, 0, 0, 0.6);
        background: #f6f6f6;
        text-align: center;
        & > th:first-child {
          border-top-left-radius: 10px;
          border-bottom: 0;
          border-right: 0;
        }
        & > th:last-child {
          border-top-right-radius: 10px;
          border-bottom: 0;
        }
      }
    }
    tbody {
      tr {
        td {
          &:first-child {
            border-right: 0;
            text-align: center;
            font-weight: 600;
            color: #232427;
          }
          &:nth-child(2) {
            text-indent: 50px;
            color: #232427;
            &.highlight-point {
              position: relative;
              &::before {
                position: absolute;
                left: -20px;
                top: 50%;
                transform: translateY(-50%);
                content: "*";
                color: #e92626;
                font-weight: bold;
                font-size: 20px;
              }
            }
          }
        }
        &:nth-child(even) {
          background: #fcfcfc;
        }

        &:last-child {
          td:first-child {
            border-bottom-left-radius: 10px;
          }
          td:last-child {
            border-bottom-right-radius: 10px;
          }
        }
        &:not(:last-child) {
          td {
            border-bottom: 0;
          }
        }
      }
    }
  }

效果图

image.png