一次jsfiddle测试引发的血案

过完年即将回京,想起自从16年末试水了React Native很少写正经的css,打开jsfiddle练练手就有了以下的血案_(:з」∠)_

目标是纯css+html实现高亮表格元素,进阶要求是之前外国大佬实现的行列均高亮。

注:移动端不能方便地查看本文所实现的效果,建议在PC端阅读。

实现高亮单元格的需求

思路是使用display模拟表格,外层div使用table值,行使用table-row,单元格使用table-cell.

单元格设置自己的border后要设置表格内部边框重叠,直接在外层表元素中添加border-collapse: collapse;设置即可。

顺带提一下border-spacing只在border-collapse: separate下起作用(感谢来自评论区的指正@果子);同时要注意对该属性使用两个值时,比如border-spacing: 10px 20px;,是指上下间距20px,左右间距10px,和一般的marginpadding是顺序颠倒的。

单元格的高亮若直接设置hover状态下的边框颜色,是会失败的,只有第一个单元格的四边均未被覆盖,其他单元格高亮边框都是残缺的。

所以在hover时采用伪元素盖在单元格上,模拟四边高亮。

看上去相当轻松地实现了…..

让我们走出Chrome的温床

  • Safari上是一坨屎,查stackoverflow貌似是因为对hover元素的伪类设定了position: absolute导致元素奔溃,是Safari的一个bug
  • Firfox在元素hover时伪元素边框没有完全盖住原来的灰边框

对于Firefox的情况作了一番研究:截图在ps中查看发现原来的边框是4px,hover时高亮边框也是4px,但灰色框露出2px。仔细对比Chrome和Firefox计算后的元素css属性值,发现Chrome的每个单元格上下左右边框均为4px,外层table没有边框;但是Firefox单元格上下左右边框是2px,外层table在盒模型上显示了2px的边框,但是计算属性值中查不到(均为0px)……估计是两个浏览器对border-collapse: collapse;的实现不同,绝望(╯‵□′)╯︵┻━┻

暂时跳过兼容问题,进入下一个需求:让行列也高亮

嗯,想法是通过两个伪元素beforeafter分别填充目标行与列,因为hover在伪元素身上等于hover在其父元素身上(联想移动端扩展点击区域),会导致切换至与目标同行或同列的其他单元格上无法出现高亮的bug(被伪元素盖住),所以在内部添加一个标签,把伪元素“托管”给它,hover依旧绑在table-cell上。最后添加tableoverflow: hidden;应该大功告成….

于是就有了上面的demo (╯‵□′)╯︵┻━┻

嗯,这个overflow: hidden;体现出和之前Firefox类似的行为:最外层table强行留了2px的灰边….Firefox上预料之中地和上一个需求一致:每个单元格都留了2px灰边….Safari?..你走….

想了想可以在外层包一个div,把overflow: hidden;扔给它!

么想到这个给div定高之后,里面的table愣是长出来4px的高,计算完后是240x244,为什么宽是好好的高会溢出啊!….(手动再见)

行,不定高了TvT

明天还要坐一天动车_(:з」∠)_