After discovering a helpful Stack Overflow answer regarding rounding table corners, I attempted to implement the provided CSS code:
/*
table {
border-collapse: collapse;
}*/
table, tr, td, th{
border: 1px solid;
text-align: center;
/*padding: 10px;*/
}
table{
border-spacing: 0;
width: 100%;
display: table;
}
table tr:last-child td:first-child, tr:last-child, table {
border-bottom-left-radius: 25px;
}
table tr:last-child td:last-child, tr:last-child, table {
border-bottom-right-radius: 25px;
}
table tr:first-child th:first-child, tr:first-child, table {
border-top-left-radius: 25px;
}
table tr:first-child th:last-child, tr:first-child, table {
border-top-right-radius: 25px;
}<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>While the rounded borders seem to work as intended, I ran into an issue. Enabling border-collapse removes the rounding effect, and enabling padding: 10px causes the borders to appear thicker than desired:
https://i.sstatic.net/Zdx7M.png
To maintain both the rounded outer borders and avoid bold inner borders, I seek a solution to include the necessary padding. How can I achieve this without compromising on the rounded border effect?
See the JSFiddle for reference: https://jsfiddle.net/eszuhvxj/1/