When styling HTML tables, developers often encounter limitations when attempting to apply styles to table rows (
A common issue arises when trying to apply border radius (-moz-border-radius or modern border-radius) to table rows. Unfortunately, this property cannot be applied directly to
Given this limitation, a workaround is necessary to achieve rounded corners on table rows. The solution involves applying a border styling strategy to the individual
<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 method creates the illusion of rounded corners on table rows by setting specific border styles and radii on the
The above is the detailed content of How to Apply Border Radius to Table Rows in HTML?. For more information, please follow other related articles on the PHP Chinese website!