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的长度或是宽度，滚动条就显示出来了。

时间： 2024-10-08 10:28:03

Table显示滚动条的相关文章

显示滚动条后，table 表头与内容不对齐，JS脚本控制

/*设置高度.滚动条*/ //其他DIV 高度var tbheight = document.getElementById("div_top").scrollHeight + document.getElementById("div_tools_bar").scrollHeight+document.getElementById("div_tools_bar2").scrollHeight+document.getElementById(&quo

限制div高度当内容多了溢出时显示滚动条

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 5 <title>限制div高度,内容多了显示滚动条</title> 6 <style type="text/css"> 7 div{ border-r

关于JLable列表的自动滚动条的显示：当JLable列表的内容超出JPanel面板所规定的高度时，自动显示滚动条的方法

关于JLable列表的自动滚动条的显示:当JLable列表的内容超出JPanel面板所规定的高度时,自动显示滚动条的方法: 通过下面的方式把JLable表的宽度和高度锁死,不能根据列表内容的增加而自动出现滚动条: JPanel tablePanel = new JPanel(); JScrollPane jScrollPane1 = new JScrollPane(); JTable teacherTable = new JTable(); //表 teacherTable.setMaximum

axure 制作滚动效果（不显示滚动条）

笔者在上一篇文章<axure制作app侧滑菜单>中介绍了淘宝app筛选菜单的制作方法,但筛选菜单中的内容仅仅填充了"一屏"的内容,如果内容比较多,就需要菜单能够上下滚动,且仅仅是菜单部分滚动,其他商品列表部分(背景)无需滚动,本文介绍一下实现方法: 上篇<axure制作app侧滑菜单>博文地址: http://pmdrx.blog.51cto.com/11810835/1911380 要是实现局部滚动,动态面板即可实现,但动态面板的滚动条是不能隐藏的,这个时候我

div 显示滚动条的CSS代码

div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div> div显示上下滚动条的css代码 <div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;"> 这里是你要显示的内容 </d

div 显示滚动条

overflow-x:auto    显示横向滚动条 overflow-y:hidden 隐藏纵向滚动条 引用此class,只显示横向的滚动条 .max{ margin:auto; overflow-x:auto; overflow-y:hidden} div给宽不给高.如果宽度超过730px,就会出现横向滚动条,纵向不设限.(其中使用overflow:auto为横向纵向都显示) <div class="max" style="width: 730px;"&g

WPF中datagrid不显示滚动条问题

WPF中DataGrid是自带滚动条的,当内容显示不下时可以使用滚动条显示.但是,开发中遇到了DataGrid一直不显示滚动条.之前也曾遇到过同类问题,再次经过查找,发现是StackPanel的原因,特此记录. 以下内容原文请参考:http://www.cnblogs.com/lhx880619/archive/2011/12/08/2281420.html 原因也比较简单 就是因为DataGrid嵌套在了StackPanel中,查看微软文档http://msdn.microsoft.com/z

【解决方法】EasyUI DataGrid无数据时不显示滚动条问题

在dataGrid的定义中添加如下代码: JavaScript Code 1 2 3 4 5 6 7 8 9 10 11 onLoadSuccess : function (data) { if (data.total == 0) { $('#dg').datagrid('insertRow', { row : {} }); $("tr[datagrid-row-index='0']").css({ "visibility" : "hidden"

QScrollArea不能显示滚动条

转载请注明出处:http://www.cnblogs.com/dachen408/p/7147141.html 问题:QScrollArea不能显示滚动条 解决方案:设置QScrollArea->setWidgetResizeable(false)解决问题.