vue+elementUi表格表头内容过多文字换行或缩略问题

原创于 2022-07-29 14:31:29 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了如何通过CSS调整station-search类的表格样式，解决了表头td过窄引发的文字换行问题。主要方法包括修改字体大小、定位caret-wrapper、调整内边距等，以提升表格的可读性和美观性。

表头内容较多，且td长度比较窄，导致文字换行问题
在这里插入图片描述
增加css样式，表格外层div类名：station-search

.station-search .table-head {
  font-size: 14px !important;
}

.station-search .el-table .caret-wrapper {
  position: absolute;
  top: 2px;
  right: 0;
}

.station-search .el-table .cell, .el-table th div {
  padding: 0 !important;
}

.station-search .el-table tr td .cell {
  padding: 5px 2px !important;
}

.station-search .el-table .cell,
.station-search .el-table th div,
.station-search .el-table--border td:first-child .cell,
.station-search .el-table--border th:first-child .cell {
  padding-left: 0 !important;
}

修改过后：
在这里插入图片描述