How can I achieve rounded corners for an entire table using CSS when border-radius cannot be applied directly to table rows?

Applying Border Radius to Table Rows

Many developers face difficulties when trying to customize the appearance of table rows (). One such challenge arises when attempting to apply border-radius to tr elements.

To address this issue, it's essential to understand that border-radius can only be applied to individual cells () within a table, not to the rows or table itself. However, there is a clever solution to achieve rounded corners for the entire table:

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!