去除elementUI<el-table>表格线

当使用elementUI的el-table组件并移除边框后,仍然发现有表格线存在。解决这个问题需要对表格结构进行深度定制。通过在外层添加自定义class,并使用CSS的深度选择器,逐个去除表格的上下左右边框,实现完全无边框的效果。
摘要由CSDN通过智能技术生成

表格去除boder后还是有表格线这就需要其他操作

1、表格结构:在表格外层包一层自定义的class,利用三箭头深度修改

 2、去除表格线

.my_table >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}

结果: 

 

 3、去除上边框:

.my_table >>> .el-table th.is-leaf {
  /* 去除上边框 */
    border: none;
}

结果:

4、 去除下边框:

.my_table >>> .el-table::before{
  /* 去除下边框 */
  height: 0;
}

 结果:

 

  • 9
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在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 ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值