如何仅为table的tbody设置带圆角边框，而thead不添加该样式？

当你给<table>设置border-collapse: collapse时，<tbody>的border-radius不会生效——这是因为合并边框模式下，浏览器会把表格边框渲染到单元格级别，<tbody>作为容器元素的圆角样式不被支持。

另外你尝试用div包裹<tbody>导致布局错乱，是因为表格内部只能容纳<thead>、<tbody>、<tfoot>这类表格专用元素，div作为块级元素放在表格里会被浏览器解析成匿名表格单元格，自然会挤到单列下方，这种方法不可行。

下面是两种可行的解决方案：

方案一：用border-spacing替代border-collapse #

这种方法保留tbody的边框和圆角，同时避免表格缝隙：

table {
  border-spacing: 0; /* 替代border-collapse: collapse */
  width: 100%;
}

thead th {
  border-bottom: 1px solid black;
  padding: 8px;
}

tbody {
  border: 1px solid black;
  border-radius: 25px;
}

tbody td {
  padding: 8px;
  border: none;
}

/* 修正tbody圆角与单元格的衔接问题 */
tbody tr:first-child td:first-child {
  border-top-left-radius: 25px;
}
tbody tr:first-child td:last-child {
  border-top-right-radius: 25px;
}
tbody tr:last-child td:first-child {
  border-bottom-left-radius: 25px;
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: 25px;
}

方案二：保留border-collapse，给单元格单独设置圆角 #

如果必须使用border-collapse: collapse，可以通过给tbody的首尾行单元格设置圆角，同时调整单元格边框来模拟tbody的圆角效果：

table {
  border-collapse: collapse;
  width: 100%;
}

thead th {
  border-bottom: 1px solid black;
  padding: 8px;
}

tbody td {
  border: 1px solid black;
  padding: 8px;
}

/* 去掉tbody单元格之间的重复边框 */
tbody tr td:not(:last-child) {
  border-right: none;
}
tbody tr:not(:last-child) td {
  border-bottom: none;
}

/* 设置tbody的圆角 */
tbody tr:first-child td:first-child {
  border-top-left-radius: 25px;
}
tbody tr:first-child td:last-child {
  border-top-right-radius: 25px;
}
tbody tr:last-child td:first-child {
  border-bottom-left-radius: 25px;
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: 25px;
}

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