CSS设置1PX边框的Table表格
写页面布局时经常会遇到1PX边框的表格,对于罗列显示大量数据来说,table是非常合适的,table本身的意义就在于罗列显示数据,web标准化并非是指不去用table标签,而是说不用table去布局,table本身也是属于标准内的。
本身table设置border:0的话,边框其实是2px。如果想实现1PX边框,可以如下设置:
table { border: 1px solid blue; border-width: 1px 0 0 1px; }
td { border: 1px solid blue; border-width: 0 1px 1px 0; }
<table border="0" cellpadding="0" cellspacing="0"></table>
原理:table设置上边框和左边框,td设置右边框和下边框。这样就可以拼合出表格,也可以使用ul等。
效果: