Home > Article > Web Front-end > How can I achieve rounded corners for an entire table using CSS when border-radius cannot be applied directly to table rows?
Many developers face difficulties when trying to customize the appearance of table rows (
To address this issue, it's essential to understand that border-radius can only be applied to individual cells (
CSS Styling
The key trick lies in separating table borders for each cell using the border-collapse: separate property. Additionally, border-style can be set to fine-tune the appearance. The following CSS code snippet provides an example:
<code class="css">table { border-collapse: separate; border-spacing: 0; } td { border: solid 1px #000; border-style: none solid solid none; padding: 10px; } tr:first-child td:first-child { border-top-left-radius: 10px; } tr:first-child td:last-child { border-top-right-radius: 10px; } tr:last-child td:first-child { border-bottom-left-radius: 10px; } tr:last-child td:last-child { border-bottom-right-radius: 10px; } tr:first-child td { border-top-style: solid; } tr td:first-child { border-left-style: solid; }</code>
HTML Example
Once the CSS style rules are defined, applying them to your table is straightforward:
<code class="html"><table> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table></code>
This solution transforms individual cells into building blocks, allowing for complete control over the appearance of the table, including rounded corners.
The above is the detailed content of How can I achieve rounded corners for an entire table using CSS when border-radius cannot be applied directly to table rows?. For more information, please follow other related articles on the PHP Chinese website!