el-table设置表格显示外边框和表头的下边框

 el-table会自带下边框,去除所有的边框

//去除table的每一条数据的下边框 
.el-table td {
   border-bottom: none;
 } 
//去除表格的最下面一行的边框
.tableStyle::before{
  width: 0;
}
//设置表的外边框
.el-table{
  border: 1px solid #ccc;
}

如果要去除表头的下边框():

.el-table th.is-leaf {

   border-bottom: none;

 }

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在el-table设置表头没有边框,你可以使用以下方法之一: 方法一:使用CSS样式 你可以通过修改CSS样式来隐藏表头边框。根据你提供的代码,你可以在CSS中添加以下样式来隐藏第一列的右边框: ```css .popup-table >>> .el-table__row .el-table_5_column_22 { border-right: none; } ``` 这样就可以隐藏第一列的右边框了。请确保你已经正确引入了CSS文件。 方法二:使用JS代码修改样式 你可以在el-table设置属性`:header-cell-style`来通过JS代码修改样式。根据你提供的代码,你可以在el-table中添加以下属性: ```html <el-table :data="tableData" :v-loading="tableLoading" row-key="id" height="100%" highlight-current-row show-summary border fit style="width: 100%; border:1px solid #EBEEF5; border-color: #868686" :cell-style="tableCellStyle" :header-cell-style="tableHeaderCellStyle"> <el-table-column fixed type="index" width="50"></el-table-column> </el-table> ``` 然后在你的JS代码中添加以下方法: ```javascript data() { return { tableHeaderCellStyle: { border: 'none' } } } ``` 这样就可以设置表头没有边框了。 希望这些方法能够帮助到你。如果你有任何其他问题,请随时提问。 #### 引用[.reference_title] - *1* *2* [el-table实现合并表头以及表格实现单选框,el-table去掉个别边框](https://blog.csdn.net/qq_44741441/article/details/128230999)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementui 更改 el-table 表头样式及修改el-table表格边框的注意事项](https://blog.csdn.net/weixin_64630810/article/details/126933343)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值