Menu
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; } 
290
Use the CSS border-radius property to add rounded corners to the table cells.
To add border radius to a table row tr , you have to specifically target the first table data td on the row and the last. This Pen is owned by Temitope Ayodele on CodePen.
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
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
