border-collapse は、表の枠線の表示方法を指定するプロパティです。
このスタイルはtable要素に適用できます。
table {
border: 2px #000000 solid;
border-collapse: collapse;
}
| border-collapse | collapse … （隣の枠線と重ねて表示します） |
|---|---|
| separate … （隣の枠線と間隔をあけて表示します）デフォルト |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table {
border: 2px #2b2b2b solid;
width: 400px;
margin-bottom: 20px;
}
td, th {
border: 2px #2b2b2b solid;
}
#example1 {
border-collapse: collapse;
}
#example2 {
border-collapse: separate;
}
-->
</style>
</head>
<body>
<table id="example1">
<tr>
<th colspan="2">重ねて表示</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>サーバーB社</td>
</tr>
</table>
<table id="example2">
<tr>
<th colspan="2">間隔をあけて表示</th>
</tr>
<tr>
<td>Web作成A社</td>
<td>Web作成B社</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| 重ねて表示 | |
|---|---|
| サーバーA社 | サーバーB社 |
| 間隔をあけて表示 | |
|---|---|
| Web作成A社 | Web作成B社 |
