elementui表格宽度自适应并且大于一定宽度,超出部分溢出隐藏
时间: 2023-08-22 22:04:22 浏览: 115
Html内容超出标记宽度后自动隐藏
要实现element-ui表格宽度自适应并且大于一定宽度,超出部分溢出隐藏,可以使用以下代码:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
在el-table标签中设置style属性的宽度为100%,这样表格就可以自适应父元素的宽度。在el-table-column标签中设置固定的列宽或者不设置宽度,这样列的宽度就会自适应内容的宽度。
如果希望表格的宽度大于一定宽度,可以给父元素添加一个固定宽度的样式,例如:
```html
<div class="table-container">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
```
```css
.table-container {
width: 800px;
overflow: hidden;
}
```
这样表格的宽度就会固定为800px,超出部分会隐藏。
阅读全文