table实现细线(细边框)表格
table实现细线（细边框）表格
有如下html代码：
<table border="1px" width="500px" height="300px" align="center" cellpadding="0" cellspacing="1">
高中语文文言文<tr align="right">
<td width="100px" height="50px">刘德华</td>
养成文>叮叮当铃儿响叮当<td align="center">张学友</td>
</tr>
经历磨难
<tr valign="top">
<td>郭富城</td>
<td valign="bottom">黎明</td>
</tr>
</table>
显⽰的效果时这样的：
这对我们来说，是没有什么问题的，cellspacing控制着每个单元格的边框之间的间隙，当把cellspacing设置为0的时候会出现什么情况呢？每⼀条border就会与它相邻的border重合，重合后的效果时这样的：
感觉⿊⿊的啊，这⾥不请⼩哥来讲嘿嘿嘿，怎么实现边框很细的效果呢，就像下边这样：
这就是所谓的细线表格了，看起来是不是⽐粗边框的好看了很多，细线表格实现的html代码如下：
<table  width="500px" height="300px" align="center" cellpadding="0" cellspacing="1" bgcolor="black">
<tr align="right" bgcolor="white">
<td width="100px" height="50px">刘德华</td>
<td align="center">张学友</td>
</tr>
考公务员难吗<tr valign="top" bgcolor="white">
<td>郭富城</td>
<td valign="bottom">黎明</td>
</tr>
</table>
看到了吧，我们这⾥所看到的细线边框其实是cellspacing“漏”出来的表格的背景⾊black。
注意：bgcolor⽤来设置table或者tr的背景。
当然了，上边都是通过html标签的属性来完成的，在⼯作中，我们更多的是使⽤css来完成，使⽤css完全可以实现相同的细线表格边框的效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
table{
border-collapse:collapse;
border-spacing:0;
border:1px solid;
}
td{
border:1px solid;
}
</style>
</head>
<body>
<table  width="500px" height="300px" align="center">  <tr align="right">
<td width="100px" height="50px">刘德华</td>
<td align="center">张学友</td>
</tr>
<tr valign="top">
<td>郭富城</td>
<td valign="bottom">黎明</td>
驾考科目四</tr>
</table>
</body>
</html>
重点：border-collapse:collapse;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。