首页 > 代码库 > Table显示滚动条

Table显示滚动条

2024-10-10 22:57:39   217人阅读

项目中需要在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显示滚动条


联系
我们