淘先锋技术网

首页 1 2 3 4 5 6 7

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属性和伪元素实现表格中间边框、间隔线等效果。这样不仅美观,且能够增强网站的用户体验。