CSSでテーブルのデザインをもっとおしゃれに！ボーダー半径の付け方
CSSでテーブル行にボーダー半径を追加する方法
方法1：table要素にborder-radiusを設定する
この方法は、最も簡単でシンプルな方法です。table要素にボーダー半径を設定することで、表全体を角丸にすることができます。
table {
border-collapse: separate; /* セルの境界線を分離します */
border: 1px solid #ccc; /* セルの境界線を設定します */
border-radius: 5px; /* 角丸の大きさを設定します */
}
この方法は、個々の行に異なるボーダー半径を設定したい場合に有効です。疑似要素を使用して、各行の最初、最後、またはすべてのセルにボーダー半径を設定することができます。
すべてのセルにボーダー半径を設定する場合
tr {
border-radius: 5px; /* 各行の角丸の大きさを設定します */
}
tr:first-child {
border-radius: 5px 0 0 5px; /* 最初の行の左上角と右下角にのみ角丸を設定します */
}
tr:last-child {
border-radius: 0 5px 5px 0; /* 最後の行の右上角と左下角にのみ角丸を設定します */
}
注意事項
border-collapse: separateプロパティを設定しないと、ボーダー半径が正しく適用されない場合があります。- セルのコンテンツがボーダー半径よりも大きい場合、コンテンツの一部がはみ出ることがあります。必要に応じて、セルのパディングを調整してください。
これらの方法を参考に、ご自身のニーズに合った方法でテーブル行にボーダー半径を追加してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSでテーブル行にボーダー半径を追加する</title>
<style>
table {
border-collapse: separate; /* セルの境界線を分離します */
border: 1px solid #ccc; /* セルの境界線を設定します */
width: 500px; /* テーブルの幅を設定します */
margin: 20px auto; /* テーブルを中央に配置します */
}
th, td {
padding: 10px; /* セルの余白を設定します */
text-align: center; /* セルのテキストを中央揃えにします */
}
tr:first-child {
border-radius: 5px 0 0 5px; /* 最初の行の左上角と右下角にのみ角丸を設定します */
}
tr:last-child {
border-radius: 0 5px 5px 0; /* 最後の行の右上角と左下角にのみ角丸を設定します */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>パソコン</td>
<td>100,000円</td>
<td>1</td>
</tr>
<tr>
<td>キーボード</td>
<td>5,000円</td>
<td>2</td>
</tr>
<tr>
<td>マウス</td>
<td>2,000円</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
table {
border-collapse: separate;
border: 1px solid #ccc;
width: 500px;
margin: 20px auto;
}
th, td {
padding: 10px;
text-align: center;
}
tr:first-child {
border-radius: 5px 0 0 5px;
}
tr:last-child {
border-radius: 0 5px 5px 0;
}
このコードを実行すると、以下のようになります。
最初の行と最後の行は、角丸が施されています。他の行は、角丸が施されていません。
このサンプルコードを参考に、ご自身のニーズに合わせてコードをカスタマイズしてください。
CSSでテーブル行にボーダー半径を追加するその他の方法
方法3：:nth-child疑似クラスを使用して特定の行にボーダー半径を設定する
この方法は、偶数行、奇数行、または特定の番号の行にのみボーダー半径を設定したい場合に有効です。
tr:nth-child(even) {
border-radius: 5px;
}
tr:nth-child(odd) {
border-radius: 5px;
}
tr:nth-child(3) {
border-radius: 5px;
}
方法4：隣接する行同士の角を丸くする
この方法は、隣接する行同士の角を滑らかに丸くしたい場合に有効です。
tr + tr {
border-radius: 0 5px 5px 0; /* 上の行のみに角丸を設定します */
}
tr:first-child + tr {
border-radius: 5px 0 0 5px; /* 最初の行と2番目の行の角丸を設定します */
}
tr:last-child {
border-radius: 0 5px 5px 0; /* 最後の行の角丸を設定します */
}
方法5：CSSフレームワークを使用する
BootstrapやFoundationなどのCSSフレームワークを使用すると、簡単にテーブル行にボーダー半径を追加することができます。これらのフレームワークには、テーブルスタイルに関する多くのユーティリティクラスが含まれています。
Bootstrapを使用する場合
<table class="table table-bordered">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>パソコン</td>
<td>100,000円</td>
<td>1</td>
</tr>
<tr>
<td>キーボード</td>
<td>5,000円</td>
<td>2</td>
</tr>
<tr>
<td>マウス</td>
<td>2,000円</td>
<td>3</td>
</tr>
</tbody>
</table>
.table-bordered tr:first-child,
.table-bordered tr:last-child {
border-radius: 5px;
}
これらの方法は、それぞれ異なる利点と欠点があります。ご自身のニーズに合った方法を選択してください。
上記以外にも、CSSでテーブル行にボーダー半径を追加する方法はいくつかあります。詳細は、CSSに関するドキュメントやリファレンスを参照してください。
css
