el-table 边框只加横线
时间: 2024-08-26 12:02:08 浏览: 62
`el-table`是Element UI框架中的表格组件,用于创建数据展示的表格界面。如果你想要给`el-table`只加上横边框,可以通过设置单元格的内边距来实现,因为Element UI的表格默认边框是单元格之间的横竖都有的。但是需要注意的是,Element UI不提供直接设置只显示横线的属性,我们可以通过自定义CSS样式来达到这个目的。
下面是一个基本的方法,通过修改`el-table`的样式来只显示横线边框:
1. 使用`:deep()`伪类来穿透组件样式的作用域限制,确保样式能够应用到内部的元素上。
2. 设置`th`和`td`的`border-bottom`属性来显示横线。
3. 设置`th`和`td`的`border-left`和`border-right`属性来隐藏竖线(如果需要的话)。
```css
/* 在你的全局样式文件或者组件内部的样式中添加以下CSS */
/deep/ .el-table .el-table__body-wrapper table tr:not(:last-child) > td,
/deep/ .el-table .el-table__body-wrapper table tr:not(:last-child) > th {
border-bottom: 1px solid #ebeef5;
}
/deep/ .el-table .el-table__body-wrapper table tr > td:not(:last-child),
/deep/ .el-table .el-table__body-wrapper table tr > th:not(:last-child) {
border-right: none;
}
```
如果你不希望对所有的`el-table`实例都应用这样的样式,可以给需要特殊样式的`el-table`添加一个特定的类名,并针对这个类名编写样式。
```css
.custom-table-style /deep/ .el-table__body-wrapper table tr:not(:last-child) > td,
.custom-table-style /deep/ .el-table__body-wrapper table tr:not(:last-child) > th {
border-bottom: 1px solid #ebeef5;
}
```
```html
<el-table class="custom-table-style" ...>
<!-- 表格内容 -->
</el-table>
```
阅读全文