Border radius html table
css, html, twitter-bootstrap
Solution
EDIT - Try this: Put `overflow:hidden` on the `.tabled-curved` with the `border-radius: 25px;`. Then just Remove the rest of the border-radius CSS
Problem
I've been trying to apply some rounded corners to a table of mine, but I just can't seem to get it right. My table is being collapsed, once the `<thead>`is clicked on. The `<thead>`need to only have top rounded corners, while the last `<tr>` element needs to only have bottom rounded corners. I'm using bootstrap as a framework. Currently my design look like this: I want my `<head>` to look like this: while the last element still have bottom rounded corners. table.html ``` <table align="center" class="table table-curved" id="nextTeamTable"> <thead data-parent="#bodyContainer" data-toggle="collapse" data-target="#tbodyCollapse"> <tr> <th>HeadTitle</th> </tr> </thead> <tbody class="collapse" id="tbodyCollapse"> <tr> <td>Body1</td> <td>Body2</td> <td>Body3</td> </tr> </tbody> </table> ``` table.css ``` .table-curved { border-collapse:separate; border: solid #ccc 1px; border-radius: 25px; } .table-curved tr:last-child td { border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } ```