CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-collapseプロパティでテーブルの境界線を折りたたむ方法

CSSでは、border-collapseプロパティを使用することで、テーブル（表）のセル同士の境界線を折りたたみ、すっきりとした見た目にすることができます。デフォルトの状態では、隣接するセルの境界線がそれぞれ独立して表示されるため、線が二重に見えてしまうことがあります。border-collapse: collapse;を指定すると、隣接する境界線が1本に統合され、より洗練されたテーブルを作成できます。

border-collapseプロパティの主な値

  • collapse：隣接するセルの境界線を結合し、1本の線として表示します。
  • separate：各セルの境界線を独立して表示します（初期値）。border-spacingプロパティと組み合わせてセル間の間隔を調整できます。

例1：border-collapseを使ったテーブル

以下の例では、border-collapse: collapse;を適用し、黒い背景に黄色の破線の境界線を持つチーム順位表を作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
th, td {
   border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

出力結果

CSSのborder-collapseプロパティでテーブルの境界線を折りたたむ方法

例2：border-collapseのみを指定した場合

次に、セルごとの境界線スタイルを指定せず、border-collapseだけを適用したシンプルな例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

出力結果

CSSのborder-collapseプロパティでテーブルの境界線を折りたたむ方法

このように、border-collapseプロパティを活用することで、二重になった境界線を1本にまとめ、視認性の高い美しいテーブルを簡単に作成できます。Webページで表をデザインする際には、ぜひ活用してみてください。

  1. CSSで比較表を作成する方法｜レスポンシブ対応のサンプルコード付きで解説

    CSSを使えば、画面幅に合わせて自動的に調整されるレスポンシブ対応の比較表を簡単に作成できます。料金プランやサービス機能の比較など、さまざまな場面で活用できるので、実装方法をマスターしておくと便利です。ここでは、実際のコード例をもとに、見やすく整った比較表の作り方を詳しく解説します。 比較表のサンプルコード 以下が、CSSでレスポンシブな比較表を作成するための完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=devic

  2. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;