el-table 只加外边框
时间: 2024-06-21 21:00:35 浏览: 7
`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单元格的边框显示,具体选择哪种方法可以根据实际情况进行选择。
el-table最后一行没有边框
要为el-table的最后一行添加边框,可以使用以下解决方案。首先,可以通过添加以下CSS样式来去除el-table的每一条数据的下边框和表格的最下面一行的边框:
```css
.el-table td {
border-bottom: none;
}
.tableStyle::before {
width: 0;
}
.el-table {
border: 1px solid #ccc;
}
```
如果上述方法无效,可以尝试使用以下代码片段:
```html
<style lang="less" scoped>
/deep/ .el-table {
.el-table__fixed,
.el-table__fixed-right {
height: 100% !important;
}
}
</style>
```
或者,可以直接复制以下代码段:
```css
.el-table {
/deep/ .el-table__body-wrapper {
overflow-x: scroll !important;
}
}
```
这些方法可以帮助你为el-table的最后一行添加边框。
#### 引用[.reference_title]
- *1* [el-table设置表格显示外边框和表头的下边框](https://blog.csdn.net/xiaolu1na/article/details/125580216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [el-table最后一行被覆盖遮挡](https://blog.csdn.net/FalconKkv/article/details/123105043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-table使用fixed后,最后一行显示不全;el-table设置fixed后,最后一行被遮挡。](https://blog.csdn.net/i_am_a_div/article/details/121926622)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)