How can I apply rounded corners to table rows using CSS when direct border radius application is limited?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-10-26 21:26:03

Original

627 people have browsed it

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>

Copy after login

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>

Copy after login

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!