HTML与CSS：如何实现表格的四个主角圆角效果

我明白你遇到的问题了——直接给<table>加border-radius在border-collapse: collapse模式下确实不会生效，而给所有单元格加圆角又会让整个表格看起来乱糟糟的。别担心，这是个很常见的CSS小坑，我来给你讲个精准的解决办法：

核心原因 #

当表格设置border-collapse: collapse时，浏览器会把所有单元格的边框合并成一个整体，这时候表格本身的border-radius会被忽略，因为合并后的边框无法单独渲染圆角。所以我们需要调整边框合并的方式，同时精准定位四个角落的单元格。

具体实现步骤 #

1. 调整表格的边框合并属性
   把border-collapse: collapse改成border-collapse: separate，同时加上border-spacing: 0——这样既能让单元格之间没有空隙（视觉上和collapse效果一致），又能让每个单元格的边框独立可控。

2. 单独给四个角落的单元格设置圆角
   使用CSS伪类选择器精准定位四个角落的单元格，分别设置对应的圆角方向：

table{ 
  /* 替换collapse为separate，消除单元格间距 */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px; 
  box-shadow: 0 6px 5px 1px rgba(0, 0, 0, 0.15); 
  margin-top: 40px ; 
  width: 70%; 
  height: 60%; 
}

/* 左上角单元格 */
table tr:first-child th:first-child,
table tr:first-child td:first-child {
  border-top-left-radius: 15px;
}

/* 右上角单元格 */
table tr:first-child th:last-child,
table tr:first-child td:last-child {
  border-top-right-radius: 15px;
}

/* 左下角单元格 */
table tr:last-child td:first-child,
table tr:last-child th:first-child {
  border-bottom-left-radius: 15px;
}

/* 右下角单元格 */
table tr:last-child td:last-child,
table tr:last-child th:last-child {
  border-bottom-right-radius: 15px;
}

/* 可选：给单元格添加基础样式，让边框显示正常 */
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

/* 可选：去掉顶部行的下边框重复（因为border-spacing为0，相邻边框会重叠） */
table tr:not(:last-child) td,
table tr:not(:last-child) th {
  border-bottom: none;
}

额外说明 #

• 如果你的表格包含<thead>和<tbody>，只需要把选择器里的tr:first-child改成thead tr:first-child，tr:last-child改成tbody tr:last-child即可。
• 保留表格的box-shadow不会影响圆角效果，因为阴影是基于表格的整体形状渲染的，配合角落单元格的圆角，视觉上就是带圆角的表格阴影。

这样调整后，你就能得到只有四个角落带圆角的表格，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者anon