在CSS3中,border-radius
属性用于创建带有圆角的元素。而border-collapse: collapse
属性用于合并表格边框。由于它们是不同的属性,因此它们不能直接混合使用。
要在折叠表格中使用带圆角的边框,您需要将border-radius
属性应用于表格单元格。以下是一个示例:
<!DOCTYPE html>
<html>
<head><style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
td:first-child {
border-radius: 10px 0 0 10px;
}
td:last-child {
border-radius: 0 10px 10px 0;
}
</style>
</head>
<body><table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
在这个示例中,我们使用border-radius
属性为表格的第一个和最后一个单元格添加圆角。这将使表格在折叠时看起来更加美观。
请注意,这个示例仅适用于固定的表格布局。如果您的表格是动态生成的,您可能需要使用JavaScript或其他脚本语言来动态计算圆角的大小和位置。
领取专属 10元无门槛券
手把手带您无忧上云