CSS のみを使用して丸いテーブルの角を作成するにはどうすればよいですか?

CSS のみを使用したテーブルの角を丸くする

Web デザインの領域では、視覚的に魅力的でユーザーフレンドリーなインターフェイスを実現することが最も重要です。デザイナーが直面する課題の 1 つは、一貫性のある美しいレイアウトを維持しながらテーブルの角を丸くすることです。この記事では、追加の画像や JavaScript を使用せず、純粋な CSS を使用して、この課題の解決策を検討します。

課題

目標は、図のような、角が丸いプレーンな HTML テーブルを作成することです。以下：

[角丸テーブルのイメージ]

イニシャル試行

-moz-border-radius を使用した最初のアプローチでは、セルの境界線を維持しながら角を丸くすることができません。これに対処するために、次の手法を採用します。

境界線を分離する手法

テーブルとそのセルに個別の境界線を定義することで、目的の効果を実現できます。このアプローチの CSS コードは次のとおりです。

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

例

上記の CSS を HTML テーブルに適用すると、次の結果が得られます。

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

結論

この手法は、純粋な CSS を使用して HTML テーブルの角を丸くする効果を実現し、外部画像や外部画像の必要性を排除します。 JavaScript。セルの境界線を維持し、一貫性のある視覚的に魅力的なレイアウトを提供します。

以上がCSS のみを使用して丸いテーブルの角を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。