版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Win32FanEx/article/details/82895770
两种实现table单线边框的代码：
<!doctype html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>两种单线边框table</TITLE>
<STYLE type="text/css">
body{margin:0;padding:0;font-family:verdana,tahoma, arial, sans-serif; }
</STYLE>
</HEAD>
<BODY>
<div style='margin:20px 0 10px 50px;'>第一种：</div>
<table style='border-collapse:collapse;table-layout:fixed;width:300px;height:100px;box-sizing:border-box;margin-left:50px;'>
<tr>
<td style='width:100px;height:100px;box-sizing:border-box;border:#00f solid 1px;'> </td>
<td style='width:100px;height:100px;box-sizing:border-box;border:#00f solid 1px;'> </td>
<td style='width:100px;height:100px;box-sizing:border-box;border:#00f solid 1px;'> </td>
</tr>
</table>
<div style='margin:10px 0 10px 50px;font-size:14px;'>实现方式：<br/>table{border-collapse:collapse;} <br/> td{border:#00f solid 1px;}</div>
<div style='margin:50px 0 10px 50px;'>第二种：</div>
<table style='table-layout:fixed;width:300px;height:100px;margin-left:50px;box-sizing:border-box;border-top:1px solid #00f;border-left:1px solid #00f;border-spacing:0;'>
<tr>
<td style='width:100px;height:100px;border-right:#00f solid 1px;border-bottom:#00f solid 1px;box-sizing:border-box;'> </td>
<td style='width:100px;height:100px;border-right:#00f solid 1px;border-bottom:#00f solid 1px;box-sizing:border-box;'> </td>
<td style='width:100px;height:100px;border-right:#00f solid 1px;border-bottom:#00f solid 1px;box-sizing:border-box;'> </td>
</tr>
</table>
<div style='margin:10px 0 10px 50px;font-size:14px;'>实现方式：<br/>table{border-top:1px solid #00f;border-left:1px solid #00f;border-spacing:0;} <br/>td{border-right:#00f solid 1px;border-bottom:#00f solid 1px;}</div>
<div style='margin:50px 0 10px 50px;font-size:14px;width:600px;background-color:#000;color:#fff;'>从代码看第一种方式更简单。但我发现在某些特殊情况下，border-collapse:collapse;会导致兼容性问题，因此第二种方式比较健壮。</div>
</BODY>
</HTML>在上面代码中，两种方法呈现效果是完全一样的。但我发现第二种方式更为健壮。（在一些更复杂代码环境下border-collapse:collapse存在兼容性问题）