Table border does not give the result of desire
I am trying to make a table with rounded corners AND a single solid border between <tr>'s
. However, I seem to be misunderstanding the crash. When I install border-collapse: separate
, I get this:
Result - border-collapse: separate
code
Html
<table>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
CSS
table, tr {
border: 1px solid black;
border-collapse: separate;
border-color: #ACACAC;
border-radius: 5px;
}
However, when I use border-collapse: collapse
, I get the correct line in between <tr>'s
, but the corners are not rounded as shown here:
Result - border-collapse: collapse
Does anyone know how to get both lines between <tr>'s
rounded corners?
Many thanks!
source to share
Add cellpadding = 0 and cellspacing = 0
to table element, remove border-bottom
from tr elments and add this CSS border-bottom
for all td elements except the last one, for example:
tr:not(:last-child) td{
border-bottom:1pt solid #ACACAC;
}
table,
tr {
border: 1px solid black;
border-color: #ACACAC;
border-radius: 5px;
}
td {
padding: 5px;
}
tr:not(:last-child) td {
border-bottom: 1pt solid #ACACAC;
}
<table cellspacing=0 cellpadding=0>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
source to share