今天刷百度前端学院试题的时候发现了一个奇怪的现象,给table元素的td元素分别加上不同颜色的background-color中间会有一条边框,类似这个样子
由于这一道尴尬的白线实在是影响页面整洁度,所以我考虑试着把边框颜色也填充成backgroung-color中方的颜色,试图得到没有白线的完美表格,添加了表格边框之后(在这里为了凸显差异性,我选择了颜色对比明显的对比色来填充边框颜色)
那道令人尴尬的白色线条依然存在,经过我的仔细分析,问题好像并没有那么简单,下面是我为table,tr,td元素都添加了边框之后显示的
那么问题来了,既然不是边框宽度,白色的框框是什么东西?
通过对度娘的搜索,我发现了border-collapse这个CSS元素,一下为W3C中的介绍:
定义和用法
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
默认值: | separate |
---|---|
继承性: | yes |
版本: | CSS2 |
JavaScript 语法: | object.style.borderCollapse="collapse" |