el-table 宽度100%无限延伸问题解决方法

JasoncodeQvQ

已于 2024-08-23 10:22:39 修改

阅读量4.8k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js elementui 前端

于 2023-04-19 13:19:31 首次发布

本文链接：https://blog.youkuaiyun.com/CodingmanNAN/article/details/130241601

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了解决Element UI中el-table组件宽度无法正确自适应的问题。通过CSS样式调整，确保表格及其内部元素能根据容器宽度进行适配，避免元素溢出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 elementUI Table 组件，实现宽度自适应方案之一

	<el-table class="elTable" :data="tableData" height="250">
	  <el-table-column prop="n1" label="labelName_1"></el-table-column>
	  <el-table-column prop="n2" label="labelName_2"></el-table-column>
	  <el-table-column prop="n3" label="labelName_3"></el-table-column>
	</el-table>

自适应页面下，el-table通常外层盒子设置宽度100%，仍然会元素溢出
给 el-table__empty-block el-table__body 这是100%，容器宽度会无线延申
上述问题解决方案如下：

解决方法

/* el-table 宽度自适应 */
.elTable { width: 100%; }
.elTable /deep/ .el-table__header-wrapper table, 
.elTable /deep/ .el-table__body-wrapper table { width: 100% !important; }
.elTable /deep/ .el-table__body, 
.elTable /deep/ .el-table__footer, 
.elTable /deep/ .el-table__header { table-layout: auto; }
.elTable /deep/ .el-table__empty-block,
.elTable /deep/ .el-table__body { width: 100% !important; }