3

テーブルにボーダー半径を適用するための簡単な方法を長い間使用してきました。これは、各コーナーセルを探し、そのコーナーの半径をそれらのセルのそれぞれに適用するというものです。

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 つの項目に適用できるため、簡単に修正できます。しかし、行スパンがそれを台無しにしている場合はどうでしょうか?

行スパンを考慮して、テーブルの各コーナーに適切な境界半径を適用するにはどうすればよいですか?

4

1 に答える 1

0

属性セレクターを使用してみてください。たぶん、このようなもの

table > :last-child > tr:last-of-type > :only-child { border-radius: 0 0 0 5px }
table > :first-child > tr:first-of-type > :last-child[rowspan="2"]{border-radius: 0 5px 5px 0}

td両方の行にまたがる場合、最初の行の最後で両方の右隅を丸くします。

デモ

rowspanこの方法で が に適用されているかどうかがわかりますがtd、より複雑で変化するテーブル構造では、構造セレクターが最適なソリューションではない可能性があり、クラス セレクターを使用することをお勧めします。

于 2013-05-29T18:29:42.380 に答える