Table边框使用总结 ,只显示你要显示的边框

本文详细介绍了HTML表格的各种样式控制属性,包括如何调整表格的基本尺寸、边框颜色与样式,以及如何控制表格内外部分隔线的显示与隐藏。通过具体实例展示了不同属性设置的效果。

一、表格的常用属性
基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、 bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景图片)、 bordercolor(表格边框的颜色),

二、表格内部分隔线的属性 
起作用的是rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表 格的列;当rules=rows时,就隐藏了纵向的分隔线,也就是我们只能看到表格的行;而当rules=none时,纵向分隔线和横向分隔线将全部隐 藏,我们就只能看到一个表格的外框了。看一下下面的对比效果你就会明白的

abc
abc
abc
这是最普通的表格形式
abc
abc
abc
这是隐藏了横向分隔线的表格,即rules=cols
aaa
bbb
ccc
这是隐藏了纵向分隔线的表格,即rules=rows
abc
abc
abc
这是隐藏了所有内部分隔线的表格,即rules=none

三、表格外部分隔线的属性
表格外边框的显示与隐藏,是可以用frame参数来控制的。注意:只对表格的外边框起作用,对内部边、线不起作用
只显示上边框 <table frame=above>
只显示下边框 <table frame=below> 
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void> 
看一下对比效果吧:

abc
abc
abc
这是最普通的表格形式
abc
abc
abc
这是只显示上边框的表格,即frame=above
abc
abc
abc
这是只显示下边框的表格,即frame=below
abc
abc
abc
这是只显示左、右边框的表格,即frame=vsides
abc
abc
abc
这是只显示上、下边框的表格,即frame=hsides
abc
abc
abc
这是只显示左边框的表格,即frame=lhs
abc
abc
abc
这是只显示右边框的表格,即frame=rhs
abc
abc
abc
这是不显示任何
### 解决 Element UI Table 边框样式问题 对于 `el-table` 的边框显示问题,可以通过自定义 CSS 来调整表格的边框样式。默认情况下,Element UI 表格可能会显示出多层边框效果,这通常是由于元格之间的边框叠加造成的。 为了实现一的边框效果,可以采用以下方案: #### 方案一:移除内边框并增加外边框 通过覆盖默认样式来达到理想的效果。具体做法是在全局或局部引入如下 CSS 代码[^1]: ```css /* 移除所有内部边框 */ .el-table th, .el-table td { border: none; } /* 添加外部边框 */ .el-table::before { height: 0px; } .el-table--border, .el-table--group{ border:none; } /* 设置整个表格的边框 */ .el-table--border::after,.el-table--group::after,.el-table::after{ width: 0 !important; } /* 如果需要保留水平分割线,则独设置 */ .el-table__row:last-child td { border-bottom: solid 1px #dfe6ec; } ``` 此段代码首先去除了所有的内部边框,接着取消了默认存在的伪元素前后的线条,最后可以选择性地恢复某些特定位置上的分隔线。 #### 方案二:使用 slot 插槽定制化渲染 如果上述方法无法完全解决问题,还可以考虑利用插槽机制来自定义每一列的内容展示形式,在模板中手动控制每项数据对应的 HTML 结构及其样式属性[^3]。 例如可以在创建表格时指定带有特殊类名的 `<template>` 标签作为作用域插槽内容,并在此基础上进一步微调其外观表现。 ```html <el-table :data="tableData"> <!-- 定义具有唯一性的 class --> <el-table-column prop="date" label="日期" class-name="single-border-cell"></el-table-column> </el-table> <style scoped> .single-border-cell { /* 自定义个 cell 的样式 */ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); &:last-of-type { box-shadow: none; } } </style> ``` 以上两种方式都可以有效地处理 `el-table` 中可能出现的多重边框现象,开发者可以根据实际项目的需求灵活选用合适的方法来进行优化改进。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值