element-ui el-table 在Safari下表头与内容错位的兼容问题

最新推荐文章于 2024-11-14 01:18:53 发布

刘家小五

最新推荐文章于 2024-11-14 01:18:53 发布

阅读量1.5k

点赞数 3

文章标签： safari vue.js

本文链接：https://blog.csdn.net/qq_38121975/article/details/131193838

版权

项目是vue±element做的，在Safari浏览器下表格出现表头和内容区域样式宽度错乱，表头宽度比内容区域小，用css样式解决：
网上查阅的以下各种方式均没有效果

1. 列的宽度统一使用width或者min-width， 不要交叉使用

2.修改css

body .el-table th.gutter {
  display: table-cell !important;
}

body .el-table colgroup.gutter {
  display: table-cell !important;
}

table {
  width: 100% !important;
}

.el-table__body {
  width: 100%;
  table-layout: fixed !important;
}

上面的方法都不适合我

3.每一列都加上

:show-overflow-tooltip="true"

以上方式均尝试一遍发现没有效
查看自己项目中看是内容区域还是表头区域比较小，单独设置样式

::v-deep .el-table__header {
  // 使表格兼容safari，不错位,表头宽度较小
  width: 100%;
  table-layout: fixed !important;
}
::v-deep .el-table__body {
  width: 100%;
  // 使表格兼容safari，不错位
  table-layout: fixed !important;
}