HTML 和 CSS：如何在桌子主角上制作圆角

Question

How am I supposed to exactly have 4 corners of this table to be rounded, I tried border-radius{ on table{ and it still doesnt work, and if do on the cells, it rounds every cells, i just want the main 4 corners of the table to be round?

table{
    /*removing the borders between the cells*/
    border-collapse:collapse;
    font-size: 14px;
    /*table shadow*/
    box-shadow: 0 6px 5px 1px rgba(0, 0, 0, 0.15);
    margin-top: 40px ;
    width: 70%;
    height: 60%;
    border-radius: 15px;
}

https://jsfiddle.net/qy4r3wn9/

Answer 1

You likely have to add

table { overflow: hidden; }

in order to let the (invisible) border actually snip off the content inside. Currently, if you were to make the border visible ( border: 1px solid red; ) you'll see that your curved corners work just fine, but that the cell contents just stick out beyond the border.

Answer 2

You can use the first-child and last-child selectors , round the appropriate corners for the table cells in the four corners.

For this you have to give the cells in the first row a border-top and in the first column a border-left respectively.

ALso set a border-right and border-bottom for your table cells ( td and th );

You the below example:

 .custom-table{margin:30px;} table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr th:last-child{ border-top:solid 1px #bbb;} table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background-color: #009879; color:#ffffff; text-align: left; } table.Info tr th, table.Info tr:first-child td { border-top: 1px solid #bbb; } /* top-left border-radius */ table tr:first-child th:first-child, table.Info tr:first-child td:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child, table.Info tr:first-child td:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; }

 <div class="custom-table"> <table> <tr> <th>Job</th> <th>Salary</th> <th>Hours</th> <th>Location</th> <th>Experirence</th> </tr> <tr> <td>item1</td> <td>item2</td> <td>item3</td> <td>item4</td> <td>item5</td> </tr> <tr> <td>item1</td> <td>item2</td> <td>item3</td> <td>item4</td> <td>item5</td> </tr> <tr> <td>item1</td> <td>item2</td> <td>item3</td> <td>item4</td> <td>item5</td> </tr> </table> </div>