el-table-column的td换行其他变高
时间: 2023-11-22 10:46:42 浏览: 91
el-table-column***-column的td会根据内容自动调整高度,而其他td的高度则会根据el-table-column的td的最大高度来调整。解决这个问题的方法有两种:
1. 设置el-table-column的td的高度为固定值,例如:在el-table-column中添加一个style属性,设置height为固定值,例如:style="height: 50px;"。
2. 使用CSS的white-space属性,将el-table-column的td的换行方式改为不换行,例如:在el-table-column中添加一个style属性,设置white-space为nowrap,例如:style="white-space: nowrap;"。
相关问题
<div class="bottomTable" v-show="coreState"> <el-table :data="tableData" style="width: 90%;" > <el-table-column prop="core" label="指标" width="300"> </el-table-column> <el-table-column prop="target" label="目标值" width="80"> </el-table-column> <el-table-column prop="finish" label="完成值" width="80"> </el-table-column> <el-table-column prop="finishRate" label="完成率%" width="100"> </el-table-column> </el-table> </div>怎么将表格的指标、目标值这行作为整体设置一张背景图片
你可以在 `.bottomTable` 样式中设置 `background-image` 属性,来为整个表格添加背景图片。同时,需要将表格中的表头和每一行的单元格的背景颜色设置为透明,以显示背景图片。你可以参考下面的 CSS 代码:
```
.bottomTable {
background-image: url('your_background_image_url_here');
}
.el-table__header th, .el-table__body td {
background-color: transparent !important;
}
```
这里使用了 `!important` 来覆盖 Element UI 默认的样式。你可以根据实际情况进行调整。
el-table-column去掉td边距
可以通过设置CSS样式来去掉el-table-column中td的边距。具体方法如下:
```CSS
.el-table__body td, .el-table__header th {
padding: 0;
}
```
这个CSS样式会将el-table-column中td的padding设置为0,从而去掉td的边距。
另外,如果只想去掉表格内部的边框,可以在el-table上添加border属性并将其设置为false,如下所示:
```HTML
<el-table :data="tableData" :border="false">
<el-table-column prop="name" width="300px"></el-table-column>
</el-table>
```
阅读全文