How Can I Create Rounded Table Corners Using CSS Only?

Rounded Table Corners Using CSS Only

In the realm of web design, achieving visually appealing and user-friendly interfaces is paramount. One such challenge faced by designers is adding rounded corners to tables while maintaining a consistent and aesthetically pleasing layout. This article explores a solution for this challenge using pure CSS, without any additional images or JavaScript.

The Challenge

The goal is to create a plain HTML table with rounded corners, similar to the illustration below:

[Image of a table with rounded corners]

Initial Attempt

The initial approach using -moz-border-radius fails to provide rounded corners while maintaining cell borders. To address this, we employ the following technique:

Separate Borders Technique

By defining separate borders for the table and its cells, we can achieve the desired effect. Here's the CSS code for this approach:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

Example

Applying the above CSS to an HTML table, we obtain the following result:

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

Conclusion

This technique effectively achieves rounded corners for HTML tables using pure CSS, eliminating the need for external images or JavaScript. It maintains cell borders and provides a consistent and visually appealing layout.

The above is the detailed content of How Can I Create Rounded Table Corners Using CSS Only?. For more information, please follow other related articles on the PHP Chinese website!