border-collapse: ***;
- ブラウザ
- 特性
- border-collapse
border-collapse は、表の境界線の表示方法を指定するプロパティです。
このスタイルはtable要素に適用することができます。
table {
border: 2px #000000 solid;
border-collapse: collapse;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border-collapse | collapse | 隣接する境界線を結合して（重ねて）表示する （初期値） |
| separate | 隣接する境界線を分離して（間隔をあけて）表示する |
CSS 2の仕様では collapse が初期値になっていますが、多くのブラウザでは separate が初期値になっているようです。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
table {
width: 400px;
margin-bottom: 20px;
border: 2px #2b2b2b solid;
}
td, th {
border: 2px #2b2b2b solid;
}
table.example1 {
border-collapse: collapse;
}
table.example2 {
border-collapse: separate;
}
</style>
</head>
<body>
<table class="example1">
<tr>
<th colspan="2">重ねて表示</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
<table class="example2">
<tr>
<th colspan="2">間隔をあけて表示</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</body>
</html>
表示例
| 重ねて表示 | |
|---|---|
| データセル1 | データセル2 |
| 間隔をあけて表示 | |
|---|---|
| データセル1 | データセル2 |
- サイト内検索
