设置表格的边框圆角效果（TableStyle）

发布时间：2023-12-24 10:26:45

表格的边框圆角效果可以通过CSS的border-radius属性来实现。在HTML中，可以使用TableStyle来定义表格的样式，并通过CSS样式表来设置圆角边框效果。

首先，我们需要在HTML中定义一个表格，并为其添加一个id属性，以便后续可以通过CSS样式表来设置其样式。例如：

<table id="myTable">
  ...
</table>

接下来，在CSS样式表中设置表格的样式，并使用border-radius属性来实现圆角边框效果。例如：

#myTable {
  border-collapse: collapse;
}

#myTable th,
#myTable td {
  border: 1px solid black;
  padding: 8px;
}

#myTable th {
  background-color: #f2f2f2;
}

#myTable td {
  background-color: #fff;
}

#myTable tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

#myTable tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

#myTable tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

#myTable tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

在上面的示例中，我们首先设置表格的边框合并效果为collapse，使相邻单元格的边框合并显示，以实现更加平滑的边框效果。然后，我们对表格的th和td元素设置了统一的边框样式，并指定了padding来设置单元格的内边距。

接下来，我们通过设置不同的border-radius属性值来实现各个角的圆角效果。通过选择器的方式，我们可以对表格的行的个th元素设置左上角的圆角，对行的最后一个th元素设置右上角的圆角，对最后一行的个td元素设置左下角的圆角，对最后一行的最后一个td元素设置右下角的圆角。

最后，我们可以根据具体的需求，对表格的其他样式进行进一步的设置，例如背景色等。

下面是一个完整的带有圆角边框效果的表格的例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    #myTable {
      border-collapse: collapse;
    }

    #myTable th,
    #myTable td {
      border: 1px solid black;
      padding: 8px;
    }

    #myTable th {
      background-color: #f2f2f2;
    }

    #myTable td {
      background-color: #fff;
    }

    #myTable tr:first-child th:first-child {
      border-top-left-radius: 10px;
    }

    #myTable tr:first-child th:last-child {
      border-top-right-radius: 10px;
    }

    #myTable tr:last-child td:first-child {
      border-bottom-left-radius: 10px;
    }

    #myTable tr:last-child td:last-child {
      border-bottom-right-radius: 10px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </table>
</body>
</html>

以上就是设置表格的边框圆角效果的一种方法。可以根据实际需求进行调整，来创建不同样式的圆角边框表格。