How can I apply rounded corners to table rows using CSS when direct border radius application is limited?

Applying Border Radius to Table Rows

While customizing the appearance of table rows (

), the ability to apply border radius directly to them can be limited. Here's a workaround using CSS styles:

<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>

This solution sets the borders of individual table data cells (

) to form the desired border around the rows. The border-collapse and border-spacing properties ensure that the cells are separated and do not overlap.

<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>

By applying this workaround, you can achieve rounded corners for your table rows, effectively enhancing their visual appeal.

The above is the detailed content of How can I apply rounded corners to table rows using CSS when direct border radius application is limited?. For more information, please follow other related articles on the PHP Chinese website!