• CSS
  • HTML
  • EXCEL
  • WINDOWS10
  • TIPS
  • MAIL

【CSS/table】border-collapseの属性

隣り合ったテーブルセルの枠線の描画方法を指定します。

値(Value)

collapse セルの枠線を離して表示します。初期値。
separate セルの枠線を重ねて表示します。

border-collapse:separate;

<head>
 <style type="test/css">
.separate{
border-collapse: separate;
border-spacing: 3px;
border: 1px solid #ccc;
margin-left:10px;
}
.separate th{
width: 30%;
padding: 5px;
background-color: #ccc;
border: 1px solid #ccc;
}
.separate td{
padding: 5px;
background-color: #fafafa;
border: 1px solid #ccc;
}
 </style>
</head>

<body>
 <table class="separate">
 <tr><th>Age</th><td>28</td></tr>
 <tr><th>height</th><td>172cm</td></tr>
 </table>
</body>

border-spacing;

セルのボーダーとボーダーの間隔(距離)を指定するプロパティです。
「separate 」値が指定されている時のみ有効です。初期値は「0」です。
↓結果、下記のように表示されます。

border-collapse:separate;
Age28
height172cm

border-collapse:collapse;

 <head>
 <style type="test/css">
.collapse{
border-collapse: collapse;
border: 1px solid #ccc;
margin-left:10px;
}
.collapse th{
width: 30%;
padding: 5px;
background-color: #d8f550;
border: 1px solid #ccc;
}
.collapse td{
padding: 5px;
background-color: #fafafa;
border: 1px solid #ccc;
}
 </style>
 </head>

<body>
 <table class="collapse">
 <tr><th>Age</th><td>28</td></tr>
 <tr><th>height</th><td>172cm</td></tr>
 </table>
</body>

↓結果、下記のように表示されます。

border-collapse:collapse;

Age28
Height172cm

関連ページ一覧

「table」要素の基本的な構成 テーブルborderの属性

スポンサーリンク

スポンサーリンク

Category

 Windows 11  Windows 10  CSS  HTML  EXCEL(エクセル)  有用なTIPs  WINDOWS  MAIL(メール)

BILLION WALLET Copyright©All rights reserved