首页 > 代码库 > CSS设置1PX边框的Table表格

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等。


效果:

CSS设置1PX边框的Table表格