By -
陳 瞽鱦
HTML & CSS 实现一像素表格
表格也需要看起来靓丽一些,虽然不可再用来布局页面。
这里提供两种常用的方法:
一、借助CSS
<meta charset="UTF-8"> <style type="text/css"> table{ width: 500; border: 0; border-spacing:0; border-collapse:collapse; } #border { border-top: 1px gray solid; border-left: 1px gray solid; } #border td { border-right: 1px gray solid; border-bottom: 1px gray solid; } </style> <table id="border"> <tr> <td>测试内容</td> <td>测试内容</td> <td>测试内容</td> </tr> <tr> <td>测试内容</td> <td>测试内容</td> <td>测试内容</td> </tr> <tr> <td>测试内容</td> <td>测试内容</td> <td>测试内容</td> </tr> </table>
二、利用边距和背景
<table cellspacing="1" cellpadding="5" bgcolor="black" width="300" height="300"> <tr bgcolor="white"><td></td><td></td><td></td></tr> <tr bgcolor="white"><td></td><td></td><td></td></tr> <tr bgcolor="white"><td></td><td></td><td></td></tr> </table>