《Html旁门左道》第六天：表格线的制作技法

最新推荐文章于 2024-06-21 09:56:49 发布

changzheng

最新推荐文章于 2024-06-21 09:56:49 发布

阅读量2.3k

点赞数

分类专栏：原创文章文章标签： html border javascript css table mozilla

本文链接：https://blog.csdn.net/changzheng/article/details/223711

版权

原创文章专栏收录该内容

22 篇文章 0 订阅

订阅专栏

表格线的制作技法，我们现在要制作一个数据表格，希望每一个单元格均用黑线包围，那么如何制作呢？如下图所示：

此主题相关图片

首先我们使用经典的“21法则”：也就是cellpadding为2，cellspacing为1，表格背景有颜色，td再设背景色，利用表格间的缝隙来加上交叉线

由于不想帖子太长，请手动多加一些<tr>使效果更明显，当然最后我会给出一个Example下载。

这是N年一直在使用的方法，简单易用，但是，现在都在强调样式分离，OK，为了追赶潮流，让我们用CSS来做这件事。

CSS方法1：模仿“21法则”
表格仍然是那个表格，为了方便我们给表格起名为

OK，这是一个干净的表格，我们用CSS来定义他

#table1{
background-color:#000000;//表格整体背景黑色，也就是缝隙间的颜色
width:500px;
padding:0px;
border-spacing:1px;//表格缝隙1个px
}
#table1 td{
background-color:#FFFFFF;
}

但是，你会发现在IE下显示表格线会显得很粗。。。由于IE对CSS2标准支持不够，所以显示不是像预想的一样（广告时间：在这里推荐一下Mozilla浏览器：））

那么如何使用CSS，才能在所有浏览器均显示正常呢？并且不利用这种缝隙法的歪门邪道，而就是利用border来做呢：），OK答案就在下面。

重新建立一个表格id="table2"

#table2{
border:1px solid #000000;//为表格外面画线
width:500px;
padding:0px;
border-collapse:collapse;//由于td四周画线，所以某些线会绘制两次，会变粗，使用这个属性可以自动合并同类项
border-spacing:0px;//表格间无需空隙
}
#table2 td{
border:1px solid #000000;//为td四周画线
}

OK，以上CSS和“21法则”的效果是完全相同的，IE和Mozill均显示正常，而且是样式与表格进行了脱藕：）

完整代码下载：