css - 如何在桌子的每个 tr 上制作圆角

Question

我正在尝试制作一个表格，其中每个 tr 都有圆角，如下图所示。

我试过下面的CSS代码。

.newTable {
    border-collapse: separate;
    border-spacing: 0;
}
.newTable td {
    border: solid 1px #000;
    border-style: none solid solid none;
    padding: 10px;
}

.newTable tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

.newTable tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

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

.newTable tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.newTable tr:first-child td {
    border-top-style: solid;
}

.newTable tr td:first-child {
    border-left-style: solid;
}

但它给了我这样的结果

标签： css

Answer 1

问题是在表格tr中不喜欢采用样式，因此您需要将border-radiusAND添加background-color到行中。

此外，由于您可以拥有 N 个表格单元格，我们将使用:first-childand:last-child仅更改td每行中第一个/最后一个的半径。

可以通过使用border-spacing表本身的属性来分隔行。

这是一个与您的插图相匹配的示例。

table {
  width: 500px;
  margin: 20px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

td {
  padding: 5px;
  text-align: center;
  background-color: #eee;
}
td:first-child {
  border-radius: 10px 0 0 10px;
}
td:last-child {
  border-radius: 0 10px 10px 0;
}

<table cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
	</tbody>
</table>