el-table每行加边框
时间: 2023-08-20 07:09:02 浏览: 339
您可以使用 CSS 来为 el-table 的每一行添加边框。在 el-table 的父容器中添加一个样式类,然后使用 CSS 选择器来选择每一行,给它们添加边框样式。下面是一个示例:
HTML:
```html
<div class="table-container">
<el-table>
<!-- 表格内容 -->
</el-table>
</div>
```
CSS:
```css
.table-container .el-table tr {
border: 1px solid #000; /* 设置边框样式 */
}
```
这样,每一行都会有一个 1px 宽的黑色边框。您可以根据需要自定义边框的样式,例如修改颜色、粗细等。请确保将 `.table-container` 替换为您实际使用的父容器的类名。
相关问题
el-table 只加外边框
`el-table` 是 Element UI 中的一个表格组件,如果你想只显示表格的外边框而不包括内部的分割线和内容边框,可以通过调整CSS样式来实现。在 Vue 项目中,你可以在你的 CSS 文件或组件的 scoped CSS 中添加以下样式:
```css
.el-table {
border-collapse: collapse; /* 合并边框 */
border: 1px solid your-border-color; /* 设置外部边框 */
/* 如果不需要内边框和行分割线 */
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
tr > td, tr > th {
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
}
```
这里的 `your-border-color` 需要替换为实际的边框颜色。这样,`el-table` 就只会显示外边框了。
el-table加边框
el-table加边框需要设置border属性,但是默认情况下只有表头和外边框添加了边框属性,单元格没有纵向边框的显示。如果想要单元格也显示边框,可以通过以下两种方法实现:
方法一:使用CSS样式设置单元格边框
```css
.el-table td, .el-table th {
border: 1px solid #dcdfe6;
}
```
方法二:使用element-ui提供的border属性
```html
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
以上两种方法都可以实现el-table单元格的边框显示,具体选择哪种方法可以根据实际情况进行选择。