Table显示滚动条

简介: 项目中需要在js文件中动态的往table里面添加数据,当数据的量到一定的程度的时候,就希望能够出现滚动条,现记录如下:Html文件:  var detail=""; detail += ''; detail +...

项目中需要在js文件中动态的往table里面添加数据,当数据的量到一定的程度的时候,就希望能够出现滚动条,现记录如下:

Html文件:
<div style="width:468px;height:260px;overflow:scroll;background:#9D9D9D;"> <table id="detail" style="width:450px;background:#9D9D9D;border-collapse:separate; border-spacing:0px 0px;"> </table> </div>

 

var detail="";
            detail += '<thead>';
            detail += '<tr>';
            detail += '<th align="left">时间</th>';
            detail += '<th align="left">用户</th>';
            detail += '<th align="left">出价</th>';
            detail += '</tr>';
            detail += '</thead>';

      detail += '<body>';
      for (var i=0;i<result.length;i++) {
        detail += '<tr>';
        detail += '<td style="width:200px;height:10px;" valign="top">'+result[i].priceTime+'</td>';
        detail += '<td valign="top">'+result[i].account+'</td>';
        detail += '<td valign="top">'+result[i].price+'</td>';
        detail += '<tr>';
      }
      detail += '</body>';

document.getElementById('detail').innerHTML = detail;

 

 

Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll

现在只要table的长度或是宽度大于div的长度或是宽度,滚动条就显示出来了。

 

相关文章
|
前端开发 API
解决el-table中横向滚动条无法显示的问题
解决el-table中横向滚动条无法显示的问题
1901 0
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1642 0
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
248 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
6月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
905 0
|
6月前
|
前端开发 小程序
使用element UI-table表格列宽自适应 【已解决】
使用element UI-table表格列宽自适应 【已解决】
369 0
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
36 0
|
JavaScript
element-ui el-table 表格中行高和字体大小调整
element-ui el-table 表格中行高和字体大小调整
3350 0
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
使用bootstrap-table时数据列过多,又想某列特殊显示?推荐你使用bootstrap-table-fixed-columns来解决吧!使用时需要注意 bootstrap-table和bootstrap-table-fixed-columns尽量保持一致,以防奇怪问题出现
863 0
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
|
存储 前端开发 数据库
el-table表格拖动列记住列宽度功能(刷新页面还在)
el-table表格拖动列记住列宽度功能(刷新页面还在)
451 0