CSS偶有所得 - table 边框加圆角踩坑

10,170 阅读2分钟

1.发现问题

看到代码里,关于表格,大家不是很喜欢用原生的table,基本都是div来做。究其原因,大概是table的样式有时候难把控,不像直接操作div那么方便。比如:我们想做一个表格,然后希望这个表格带有边框,且最外层的边框是圆角的。

2. 实践采坑ing

2.1 - 【踩坑】 这是什么鬼,有空隙😳

css 代码如下:

table {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
th,td {
  border: 1px solid #d8d8d8;
}

实际效果如下:

带空隙的table

2.2 - 【埋坑】 去掉空隙啦 😁 【踩坑】但是,我的边框小圆角呢?😢

表格之间之所以有空隙是因为table有默认的样式,每个单元格之间都有一定的空隙。 只需要在css里让border重合,去掉空隙就好了。

css 代码如下:

table {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  /* 消除单元格之间的空隙 */
  border-collapse: collapse;
}
th,td {
  border: 1px solid #d8d8d8;
}

效果如下:

去掉空隙

2.3 - 【埋坑】把小圆角搞回来😈

空隙是没了,但是,小圆角也不见了。 原来,当我们使用了border-collapse的时候,border-radius属性就不会被应用到表格元素上了。 So...不如先让外边框整个不见,然后用盒子阴影来做小圆角。

css 代码如下:

table {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    /* 消除单元格之间的空隙 */
    border-collapse: collapse;
    /* 消除掉外边框 */
    border-style:hidden  
}

消除外边框效果如下:

消除外边框

距离成功就一步之遥啦😋

使用box-shadow:(X偏移量,Y偏移量,阴影模糊半径,阴影扩展半径,阴影颜色) 我们想让这个阴影替代border,那就把X,Y偏移量以及阴影模糊半径都设置为0,扩展半径就是我们希望的border的粗细。阴影颜色就是希望的border的颜色。这样一个假border就做好了。

css 代码如下:

table {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    /* 消除单元格之间的空隙 */
    border-collapse: collapse;
    /* 消除掉外边框 */
    border-style:hidden; 
    /* hack一下加个阴影 */
    box-shadow: 0 0 0 1px #d8d8d8;
}

大功告成啦

3. 总结

主要原因是table有一些自定义的样式,导致加个圆角的边框不太容易直接操作。首先要去掉单元格空隙。但是去掉空隙的border-collapse属性会导致border-radius不生效。所以只能隐藏原有边框,用box-shadow阴影做个假边框。

css 代码如下:

table {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    /* 消除单元格之间的空隙 */
    border-collapse: collapse;
    /* 消除掉外边框 */
    border-style:hidden;  
    /* hack一下加个假边框 */
    box-shadow: 0 0 0 1px #d8d8d8;
}
th,td {
  border: 1px solid #d8d8d8;
}

4.参考资料

  1. box-shadow 属性