el-table 超过宽度 显示滚动
时间: 2023-10-02 12:05:24 浏览: 354
实现文本超出文本框最大宽度时滚动
要在 element-ui 的 ElTable 组件中实现超出宽度时显示滚动条,可以使用 CSS 的 `overflow` 属性来控制表格容器的溢出内容。
首先,将 ElTable 包裹在一个容器元素中,如 `<div>`:
```html
<div class="table-container">
<el-table>
<!-- 表格内容 -->
</el-table>
</div>
```
然后,为容器元素设置固定的宽度,并将 `overflow` 属性设置为 `auto` 或 `scroll`:
```css
.table-container {
width: 500px; /* 设置容器宽度 */
overflow: auto; /* 或 overflow: scroll; */
}
```
通过将容器元素的宽度设置为固定值,并设置 `overflow` 属性为 `auto` 或 `scroll`,可以在表格内容超出容器宽度时显示水平滚动条。你可以根据实际需要调整容器的宽度和样式。
注意:当表格的列宽度设置为百分比时,超出容器宽度时也会自动显示滚动条。只有当列宽度设置为固定值时才需要通过容器的溢出处理来显示滚动条。
阅读全文