el-table字体模糊

### 关于 Element UI 中 `el-table` 字体模糊解决方案

在使用 Element UI 的 `el-table` 组件时遇到字体显示不清晰的情况，通常是由 CSS 样式设置不当引起的。为了确保表格中的文字能够正常渲染并保持良好的可读性，可以采取以下几种方法来解决问题。

#### 方法一：调整全局样式
通过自定义全局样式文件或引入额外的 CSS 文件，在项目中增加特定的选择器用于覆盖默认样式：

/* 设置整个页面的基础字体 */
body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}

/* 针对 table 单独设定字体大小和行高 */
.el-table th,
.el-table td {
    padding: 8px 0;
    font-size: 14px !important;
    line-height: normal;
}

上述代码片段有助于提高整体阅读体验，并减少因浏览器缩放而导致的文字失真现象[^1]。

#### 方法二：优化表格容器布局属性
有时由于父级元素设置了某些特殊的定位方式（如绝对定位），可能会间接影响到子组件内的文本呈现效果。此时可以通过修改 `.el-table__body-wrapper` 类下的相关参数来进行修正：

/* 调整滚动条宽度以及内部溢出处理 */
.el-table__body-wrapper::-webkit-scrollbar {
    height: 6px;
}

/* 改善固定列与非固定列之间的间距 */
.el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这些改动可以帮助改善视觉上的错位感，从而使得每一行的内容更加紧凑有序[^2]。

#### 方法三：检查是否存在第三方插件干扰
如果应用了其他库或者框架，则需确认它们是否会改变原有 DOM 结构或是注入新的样式规则进而造成冲突。对于此类情况建议逐一排查可能引起问题的因素直至找到根源所在。

最后值得注意的是，当涉及到跨平台兼容性的考量时，务必测试不同设备端的表现差异以便及时作出相应调整。