如何给el-table添加左右两边的边框 不适用border
时间: 2023-10-27 09:17:16 浏览: 140
你可以使用 `::before` 和 `::after` 伪元素来实现给 `el-table` 添加左右两边的边框,并且不使用 `border` 属性。
以下是一个示例代码:
```css
.el-table__body-wrapper::before,
.el-table__body-wrapper::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: #e4e7ed;
}
.el-table__body-wrapper::before {
left: 0;
}
.el-table__body-wrapper::after {
right: 0;
}
```
这段代码会在 `el-table` 的 `.el-table__body-wrapper` 元素的前后分别添加一个宽度为 `1px`,背景色为 `#e4e7ed` 的竖线元素,从而实现左右两边的边框效果。
相关问题
怎样给el-table添加边框以及修改边框颜色
你可以给 el-table 添加边框和修改边框颜色的方法如下:
1. 添加边框
可以通过设置 el-table 的 border 属性来添加边框,该属性支持 Boolean 类型和 String 类型,Boolean 类型表示是否显示边框,String 类型表示边框的样式,如下所示:
```html
<el-table :data="tableData" :border="true">
<!-- 表格内容 -->
</el-table>
```
2. 修改边框颜色
可以通过设置 el-table 的 style 属性来修改边框颜色,如下所示:
```html
<el-table :data="tableData" :border="true" style="border: 1px solid red;">
<!-- 表格内容 -->
</el-table>
```
以上是给 el-table 添加边框和修改边框颜色的方法,希望能帮到你。
el-table的第二列el-table-column右侧边框加粗
.el-table-column的右侧边框可以通过添加以下CSS样式来加粗:
.el-table .el-table__body-wrapper .cell:nth-child(2) {
border-right-width: 2px;
border-right-style: solid;
}
阅读全文