如何将thead的角落四舍五入为圆桌头？

Question

我试图在最左边和最右边四舍五入表格标题thead th。 我将它们弄圆了，但是底层的tr戳了背景色，方法是留下两个带有圆角的th，但是从thead tr戳出一个尖锐的边缘。

我尝试在Firefox inspect元素中玩转以实时应用CSS，但是我无法摆脱锋利的边缘。

 table thead tr { background-color: #005073; } table thead tr th { width: 200px; text-align: center; } table { margin-right: auto; margin-left: auto; width: 100%; border-collapse: separate; border-spacing: 0; } table tbody tr:hover { background-color: black; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #1ebbd7; } tr:first-child th:first-child { border-top-left-radius: 6px; } tr:first-child th:last-child { border-top-right-radius: 6px; } 

 <div class="contentTable"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>State</th> <th>Zip-Code</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bob</td> <td>212 Lift St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>2</td> <td>Todd</td> <td>331 Geromino St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>3</td> <td>Jim</td> <td>1222 Jumbo Ln.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>4</td> <td>Susan</td> <td>888 Bambi Way</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>5</td> <td>James</td> <td>112 Falcon Dr.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>6</td> <td>Abby</td> <td>6219 Pumpkin Ln.</td> <td>Ohio</td> <td>43233</td> </tr> </tbody> </table> </div> 

Answer 1

更改

 table thead tr {
     background-color: #005073;
 }

至

 table thead th {
     background-color: #005073;
 }

Answer 2

您可以通过应用border-radius: 6px 6px 0px 0px;达到所需的效果border-radius: 6px 6px 0px 0px; 到整个表并给它overflow: hidden 。

 table thead tr { background-color: #005073; } table thead tr th { width: 200px; text-align: center; } table { margin-right: auto; margin-left: auto; width: 100%; border-collapse: separate; border-spacing: 0; } table tbody tr:hover { background-color: black; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #1ebbd7; } table { border-radius: 6px 6px 0px 0px; overflow: hidden; } 

 <div class="contentTable"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>State</th> <th>Zip-Code</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bob</td> <td>212 Lift St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>2</td> <td>Todd</td> <td>331 Geromino St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>3</td> <td>Jim</td> <td>1222 Jumbo Ln.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>4</td> <td>Susan</td> <td>888 Bambi Way</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>5</td> <td>James</td> <td>112 Falcon Dr.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>6</td> <td>Abby</td> <td>6219 Pumpkin Ln.</td> <td>Ohio</td> <td>43233</td> </tr> </tbody> </table> </div>