テーブルにボーダー半径を適用するための簡単な方法を長い間使用してきました。これは、各コーナーセルを探し、そのコーナーの半径をそれらのセルのそれぞれに適用するというものです。
table > :first-child > tr:first-of-type > :first-child { border-radius: 5px 0 0 0 }
table > :first-child > tr:first-of-type > :last-child { border-radius: 0 5px 0 0 }
table > :last-child > tr:last-of-type > :first-child { border-radius: 0 0 0 5px }
table > :last-child > tr:last-of-type > :last-child { border-radius: 0 0 5px 0 }
これで、ランダムな行スパンまたは列スパンのない行と列の完全なグリッドである平均的なテーブルに対して、これはすべてうまく機能します。しかし、それらを含め始めるとどうなりますか? それはすべてを台無しにします。たとえば、最後の行にセルが 1 つしかないこのテーブルを例にとります。次の 3 つのセルは前の行からまたがっています。
<table>
<tr>
<td>Item 1</td>
<td rowspan="2">Description for both Item 1 and Item 2</td>
<td rowspan="2">Option for Items 1 & 2</td>
<td rowspan="2">Option for Items 1 & 2</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
</table>
ここで起こることは、最後の行の最初と最後の子の両方であるため、右下の境界線の半径がその単一の「アイテム 2」セルに適用され、右下隅がそれをオーバーライドすることになります。
列スパンの問題であれば、その CSS の下に別の行を追加するだけで:only-child
、左下と右下の両方の半径をその 1 つの項目に適用できるため、簡単に修正できます。しかし、行スパンがそれを台無しにしている場合はどうでしょうか?
行スパンを考慮して、テーブルの各コーナーに適切な境界半径を適用するにはどうすればよいですか?