サイト内検索
...スタイルシート(css)...
スタイルシート・ｔａｂｌｅ
境界線の表示方法
- 境界線の表示方法は、border-collapseプロパティを指定します。
- table要素のみに適用されます。
- [使い方]
- .sample{border-collapse: collapse;}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border-collapse: | collapse; | 隣の境界線と重ねて表示します。 |
| separate; | 隣の境界線と間隔をあけて表示します。
(標準値) |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
table{
border: 2px #999999 solid;
width: 300px;
margin-bottom: 10px;
}
th,td{
border: 2px #999999 solid;
}
.sample1{
border-collapse: collapse;
}
.sample2{
border-collapse: separate;
}
-->
</style>
[ｂｏｄｙの中]
<table class="sample1"><tr>
<th>Ｎｏ１</th>
<th>Ｎｏ２</th>
</tr>
<tr>
<td>Ｎｏ３</td>
<td>Ｎｏ４</td>
</tr>
</table>
<table class="sample2">
<tr>
<th>Ｎｏ１</th>
<th>Ｎｏ２</th>
</tr>
<tr>
<td>Ｎｏ３</td>
<td>Ｎｏ４</td>
</tr>
</table>
[ブラウザ上]
| Ｎｏ１ | Ｎｏ２ |
|---|---|
| Ｎｏ３ | Ｎｏ４ |
| Ｎｏ１ | Ｎｏ２ |
|---|---|
| Ｎｏ３ | Ｎｏ４ |
