css 表格圆角+边框不重叠

  .resource-table {
    border-collapse: separate; /* 设置边框分离 */
    border-spacing: 0; /* 边框间距设置为0 */
    width: 100%; /* 表格宽度 */
    thead tr {
      background: #f0f3f5;
  
      th {
        color: #5a6066;
        border-top: 1px solid #bcc4cc;
        border-left: 1px solid #bcc4cc;
        height: 56px;
  
        &:first-of-type {
          border-top-left-radius: 4px;
        }
  
        &:last-of-type {
          border-top-right-radius: 4px;
          border-right: 1px solid #bcc4cc;
        }
      }
    }
  
    td {
      height: 56px;
      border-top: 1px solid #bcc4cc;
      border-left: 1px solid #bcc4cc;
      padding: 8px; /* 单元格内边距 */
      text-align: center; /* 文本居中 */
    }
  
    tbody {
      tr {
        td:first-of-type {
          background: #f0f3f5;
        }
  
        td:last-of-type {
          border-right: 1px solid #bcc4cc;
        }
      }
    }
  
    tbody tr:last-of-type {
      td {
        border-bottom: 1px solid #bcc4cc;
      }
  
      td:first-of-type {
        border-bottom-left-radius: 4px;
        background: #f0f3f5;
      }
  
      td:last-of-type {
        border-bottom-right-radius: 4px;
      }
    }
  }