使用CSS实现报表细边框的三种方式
使用CSS实现表格细边框的三种方式
说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。
由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>细边框表格的实现方式</title>
<style>
/*可以应用于所有浏览器,但是需要设置table的标签属性:border="0" cellpadding="0" cellspacing=1*/
.demo1 {
background-color: #ccc;
}
.demo1 th,.demo1 td {
background-color: #fff;
}
/* 利用表格样式:{border-spacing:0px;}和表格与单元格背景色的不同来实现细边框。[注:IE7及以前的浏览器不支持border-spacing]*/
.demo2 {
background-color: #ccc;
border-spacing: 1px;
}
.demo2 th, .demo2 td {
background-color: #fff;
}
/* 为表格设置合并边框模型:{border-collapse: collapse;} 实现细边框。[注:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。] */
.demo3 {
border: 1px solid #ccc;
border-collapse: collapse;
}
.demo3 th, .demo3 td{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<p>Demo1</p>
<table class="demo1" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1-01</td>
<td>Row1-02</td>
<td>Row1-03</td>
</tr>
<tr>
<td>Row2-01</td>
<td>Row2-02</td>
<td>Row2-03</td>
</tr>
</tbody>
</table>
<p>Demo2</p>
<table class="demo2">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1-01</td>
<td>Row1-02</td>
<td>Row1-03</td>
</tr>
<tr>
<td>Row2-01</td>
<td>Row2-02</td>
<td>Row2-03</td>
</tr>
</tbody>
</table>
<p>Demo3</p>
<table class="demo3">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1-01</td>
<td>Row1-02</td>
<td>Row1-03</td>
</tr>
<tr>
<td>Row2-01</td>
<td>Row2-02</td>
<td>Row2-03</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：