cellspace的css做法

最新推荐文章于 2023-10-09 09:49:31 发布

原创最新推荐文章于 2023-10-09 09:49:31 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #table #浏览器 #html

本文介绍如何使用CSS属性border-collapse和border-spacing来精确控制HTML表格的布局及单元格间距，包括两种边框显示模式：合并（collapse）和独立（separate）。通过这些技巧，可以实现更加灵活和美观的表格呈现。

通常设置table的cellspace="0"都是为了自己定义table的样式，但始终是在写HTML的属性。
但是为了完全用css来控制，也有办法：

table {
    border-collapse: collapse;
    border-spacing: 0px;
}

border-collapse有两个选项： separate | collapse。
seperate 的边框如下：

||    ||
||      ||

collapse 的边框如下:

|       | (两个相邻单元格的相邻边合并了)

虽然这两个css属性是可以完成的，但是由于浏览器的原因，也许有时候不能正确render，所以，具体用那种方式，还要根据特定情况来决定。