解决element表格因为列太多，拉动横向滚动条表格错位的问题

西红柿又名小番茄

已于 2024-10-11 11:44:13 修改

阅读量574

点赞数 2

文章标签： vue.js javascript elementui

于 2024-09-13 14:24:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39293316/article/details/142210116

版权

在使用element表格时，有时候列数太多就会自动出现横向滚动条，这时我们把横向滚动条拉倒最右边时，有时会出现表格错位的现象；

如果细心查看就会发现，在每一行最后的td中会有一个没有内容的cell，此时我们把这个cell的状态改为display：none就可以了

/deep/.el-table {
  width: calc(100% - 10px) !important;//表格宽度不能为100%
}
/deep/.el-table .el-table__body-wrapper .el-table__body > tbody .el-table__row > td:last-child {
  border: 0;
}
/deep/.el-table .el-table__body-wrapper .el-table__body > tbody .el-table__row > td:last-child .cell {
  display: none;
}
/deep/.el-table--border::after, .el-table--group::after {
  width: 0px;
}