50 lines
1.1 KiB
HTML
50 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>CSS属性border-collapse的应用</title>
|
||
|
|
<style>
|
||
|
|
.separate{
|
||
|
|
border-collapse: separate;
|
||
|
|
}
|
||
|
|
.collapse{
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h3>CSS属性border-collapse的应用</h3>
|
||
|
|
<hr />
|
||
|
|
<table border="1"class="separate">
|
||
|
|
<caption>
|
||
|
|
双线边框效果
|
||
|
|
</caption>
|
||
|
|
<tr>
|
||
|
|
<td>年份</td>
|
||
|
|
<td>第一季度</td>
|
||
|
|
<td>第二季度</td>
|
||
|
|
<td>第三季度</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
|
||
|
|
<tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
|
||
|
|
<tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
|
||
|
|
</table>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<table border="1"class="collapse">
|
||
|
|
<caption>
|
||
|
|
折叠边框效果
|
||
|
|
</caption>
|
||
|
|
<tr>
|
||
|
|
<td>年份</td>
|
||
|
|
<td>第一季度</td>
|
||
|
|
<td>第二季度</td>
|
||
|
|
<td>第三季度</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
|
||
|
|
<tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
|
||
|
|
<tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</body>
|
||
|
|
</html>
|