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;

原文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105827760