Definition and Usage The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.
Your problem is unrelated to how you have set border-radius . Fire up Chrome and hit Ctrl+Shift+j and inspect the element. Uncheck width and the border will have curved corners. Show activity on this post.
In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders. The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model).
I figured it out. You just have to use some special selectors.
The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:
table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
Now everything rounds properly, except that there's still the issue of border-collapse: collapse
breaking everything.
A workaround is to add border-spacing: 0
and leave the default border-collapse: separate
on the table.
The following method works (tested in Chrome) by using a box-shadow
with a spread of 1px
instead of a "real" border.
table {
border-collapse: collapse;
border-radius: 30px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #666; /* this draws the table border */
}
td {
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baz</td>
<td>Qux</td>
</tr>
<tr>
<td>Life is short</td>
<td rowspan="3">and</td>
</tr>
<tr>
<td>Love</td>
</tr>
<tr>
<td>is always over</td>
</tr>
<tr>
<td>In the</td>
<td>Morning</td>
</tr>
</tbody>
</table>
If you want a CSS-only solution (no need to set cellspacing=0
in the HTML) that allows for 1px borders (which you can't do with the border-spacing: 0
solution), I prefer to do the following:
border-right
and border-bottom
for your table cells (td
and th
)border-top
border-left
first-child
and last-child
selectors, round the appropriate corners for the table cells in the four corners.See a demo here.
Given the following HTML:
SEE example below:
.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: #eee;
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>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</div>
Have you tried using table{border-spacing: 0}
instead of table{border-collapse: collapse}
???
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