Table显示滚动条
Posted Mr_伍先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Table显示滚动条相关的知识，希望对你有一定的参考价值。
项目中需要在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的长度或是宽度，滚动条就显示出来了。
以上是关于Table显示滚动条的主要内容，如果未能解决你的问题，请参考以下文章
音频处理Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )