Table Rows Border Radius

Design help Custom code
1

Hi, could someone help me adding border radius to the table rows with the background?
I already tried some ways but it doesn’t work…

<table style="border-collapse: collapse; width: 100%; border-width: 0;" border="0"><colgroup><col style="width: 60%;"><col style="width: 40%;"></colgroup>
<tbody>
<tr style="background-color: var(--brown-tints--brown-3);">
<td style="padding: 8px;"><strong>Energia</strong></td>
<td style="padding: 8px;">1765 Kj 422 Kcal</td>
</tr>
<tr>
<td style="padding: 8px;"><strong>Grassi</strong></td>
<td style="padding: 8px;">42 g</td>
</tr>
<tr style="background-color: var(--brown-tints--brown-3);">
<td style="padding: 8px;"><strong>di cui acidi grassi saturi</strong></td>
<td style="padding: 8px;">6.9 g</td>
</tr>
<tr>
<td style="padding: 8px;"><strong>Carboidrati</strong></td>
<td style="padding: 8px;">6.9 g</td>
</tr>
<tr style="background-color: var(--brown-tints--brown-3);">
<td style="padding: 8px;"><strong>di cui zuccheri</strong></td>
<td style="padding: 8px;">2.5 g</td>
</tr>
<tr>
<td style="padding: 8px;"><strong>Proteine</strong></td>
<td style="padding: 8px;">2.6 g</td>
</tr>
<tr style="background-color: var(--brown-tints--brown-3);">
<td style="padding: 8px;"><strong>Sale</strong></td>
<td style="padding: 8px;">3.8 g</td>
</tr>
<tr>
<td style="padding: 8px;"><strong>Fibre</strong></td>
<td style="padding: 8px;">1.6 g</td>
</tr>
</tbody>
</table>

Thanks in advance

2

hi @Dionisie there is not any natural way to create a round corners to HTML table rows. anyway there are hacks with clip path but I will recommend to search internet as your request is not related to WF.

However, you can achieve this effect by applying the rounded corners to the table cells (<td> or <th>) within the row.

Here’s how you can achieve it:

  1. Wrap each cell in the row with a div and apply the border-radius to the div.

  2. Apply border-radius directly to the first and last cells (typically for the left and right side corners).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded Corners Table Row</title>
    <style>
        table {
            border-collapse: separate; /* Ensure borders are not collapsed */
            border-spacing: 0;         /* Remove spacing between cells */
        }
        tr {
            background-color: lightblue;
        }
        td {
            padding: 10px;
        }
        /* Apply border-radius to first and last cells */
        td:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        td:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </table>
</body>
</html>
1 Like