el-table的宽度超出浏览器宽度时,el_table底部不会出现滚动条
时间: 2023-10-05 11:14:46 浏览: 578
您可以尝试将el-table包裹在一个带有固定高度和overflow属性设置为auto的容器中。这样当el-table的内容超出容器高度时,容器会出现滚动条,从而实现滚动。
示例代码如下:
```html
<div style="height: 400px; overflow: auto;">
<el-table :data="tableData" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
</div>
```
在上面的示例中,将容器的高度设置为400px,并将overflow属性设置为auto。这样当el-table的内容超出400px高度时,容器就会自动出现垂直滚动条。
您可以根据实际情况调整容器的高度和其他样式属性来满足您的需求。
相关问题
el-table 滚动条宽度 在 el-table尺寸内
el-table 是 Element UI 中的一个表格组件,提供了丰富的功能和配置选项。关于 el-table 中滚动条宽度的问题,可以通过设置 el-table 的尺寸和样式来实现在表格内显示滚动条。
首先,你可以通过设置 el-table 的高度来控制表格的尺寸,例如设置一个固定的高度或者使用百分比来自适应父容器的高度。这样可以限制表格的高度,当表格内容超出高度时,会出现纵向滚动条。
其次,你可以使用 CSS 样式来调整滚动条的宽度。可以通过设置 el-table 的样式或者使用自定义的 CSS 类来修改滚动条的宽度。例如,可以使用 `::webkit-scrollbar` 选择器来修改滚动条的样式,通过设置 `width` 属性来调整滚动条的宽度。
需要注意的是,滚动条的宽度可能会受到浏览器和操作系统的影响,不同浏览器和操作系统可能会有不同的默认样式和宽度。因此,你可能需要根据具体情况进行调整和兼容处理。
el-table 如果设置滚动条的宽度和高度 导致<el-table-column fixed="right"底部多了一个滚动条高度的空白
这个问题通常发生在设置了固定列(fixed)和滚动条时。原因是固定列会创建一个新的div来包裹固定的列,而滚动条是添加在外层的div上的。因此,外层的div会比内层的div高出滚动条的高度,导致底部多出一块空白。
解决方法是在外层的div上设置一个负的margin-bottom,值为滚动条的高度。例如:
```css
.el-table__body-wrapper {
margin-bottom: -17px; /* 如果滚动条高度为17px */
}
```
这样就可以消除底部的空白了。
阅读全文