CSS表格中间有边框是一种常见的设计方式,可使表格更加清晰明了,提高用户体验。下面介绍一些实现方法。
table { border-collapse: collapse; /*合并边框*/ } td { border: 1px solid black; /*单元格边框*/ } td:not(:last-child) { border-right: none; /*除最后一个单元格外,去掉右侧边框*/ } td:not(:first-child) { border-left: none; /*除第一个单元格外,去掉左侧边框*/ } tr:not(:first-child) td { border-top: none; /*除第一行外,去掉上侧边框*/ }
代码中,border-collapse属性可将相邻单元格的边框合并为一个,避免了重复的绘制。每个单元格的边框设置为1像素的黑色实线,且除了第一个和最后一个单元格外,其余的除去左右边框。而每行的第一个单元格除去顶部边框。
以上代码实现了表格中间有边框的效果,但如果需要添加间隔线,可使用:after伪元素实现,代码如下:
td { position: relative; /*设置position属性方便定位*/ } td:after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: black; /*间隔线颜色*/ }
以上代码会添加一条1像素宽的垂直间隔线,且该间隔线在每个单元格的最右侧。如果需要水平间隔线,可使用:before伪元素实现,代码类似。
总之,针对不同的需求,可使用不同的CSS属性和伪元素实现表格中间边框、间隔线等效果。这样不仅美观,且能够增强网站的用户体验。