サイト内検索
...スタイルシート(css)...
スタイルシート・table
境界線の表示方法
- 境界線の表示方法は、border-collapseプロパティを指定します。
- table要素のみに適用されます。
- [使い方]
- .sample{border-collapse: collapse;}
プロパティ名 | 値 | 説明 |
---|---|---|
border-collapse: | collapse; | 隣の境界線と重ねて表示します。 |
separate; | 隣の境界線と間隔をあけて表示します。
(標準値) |
サンプル
[headの中]
<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>
[bodyの中]
<table class="sample1"><tr>
<th>No1</th>
<th>No2</th>
</tr>
<tr>
<td>No3</td>
<td>No4</td>
</tr>
</table>
<table class="sample2">
<tr>
<th>No1</th>
<th>No2</th>
</tr>
<tr>
<td>No3</td>
<td>No4</td>
</tr>
</table>
[ブラウザ上]
No1 | No2 |
---|---|
No3 | No4 |
No1 | No2 |
---|---|
No3 | No4 |