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 属性，但它不适用。 我一直在查找，我所能找到的只是将 border-collapse 设置为单独的，但这也没有做到。 有什么帮助吗？

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>