HTML CSS表边框半径属性未应用

Question

我有一个格式如下的表：

.main-table {
margin-top: 1vw;
margin-left: 1vw;
height: 30vw;
overflow-y: auto;
overflow-x: hidden;
}
table {
border-collapse: separate;
border-radius: 3vw;
border-spacing: 0;
margin-top: 1vw;
width: 87vw;
}
td,
th {
border: none;
}
th {
height: 2vw;
background: #deb724;
font-weight: bold;
}
td {
height: 3vw;
background: white;
text-align: center;
}
tr td:hover {
background: #d5d5d5;
}

<div class="main-table">
<table>
<thead>
<tr>
<th> Hello </th>
<th> World </th>
</tr>
</thead>
<tbody>
<tr>
<td> Wow look </td>
<td> What is this </td>
</tr>
</tbody>
</table>
</div>

表上有一个border-radius属性，但它不适用。我一直在抬头看，我能找到的只是将边界塌陷设置为单独的，但这也没有起到作用。有什么帮助吗？

Answer 1

将overflow: hidden添加到表中。

.main-table {
margin-top: 1vw;
margin-left: 1vw;
height: 30vw;
overflow-y: auto;
overflow-x: hidden;
}
table {
border-collapse: separate;
border-radius: 3vw;
border-spacing: 0;
margin-top: 1vw;
width: 87vw;
overflow: hidden;
}
td,
th {
border: none;
}
th {
height: 2vw;
background: #deb724;
font-weight: bold;
}
td {
height: 3vw;
background: white;
text-align: center;
}
tr td:hover {
background: #d5d5d5;
}

<div class="main-table">
<table>
<thead>
<tr>
<th> Hello </th>
<th> World </th>
</tr>
</thead>
<tbody>
<tr>
<td> Wow look </td>
<td> What is this </td>
</tr>
</tbody>
</table>
</div>

实际上它是被应用的，但在外部溢出。我们可以通过在下面的片段中向表添加边框来看到这一点。这就是为什么我们应该添加overflow: hidden

.main-table {
margin-top: 1vw;
margin-left: 1vw;
height: 30vw;
overflow-y: auto;
overflow-x: hidden;
}
table {
border-collapse: separate;
border-radius: 3vw;
border-spacing: 0;
margin-top: 1vw;
width: 87vw;
border: 2px solid red;
}
td,
th {
border: none;
}
th {
height: 2vw;
background: #deb724;
font-weight: bold;
}
td {
height: 3vw;
background: white;
text-align: center;
}
tr td:hover {
background: #d5d5d5;
}

<div class="main-table">
<table>
<thead>
<tr>
<th> Hello </th>
<th> World </th>
</tr>
</thead>
<tbody>
<tr>
<td> Wow look </td>
<td> What is this </td>
</tr>
</tbody>
</table>
</div>