如何使html表格垂直滚动

74

你为什么不把你的表在一个div？

<div style="height:100px;overflow:auto;"> 

... Your code goes here ... 

</div>

来源

2012-06-22 08:07:22 sushil

+2

+1简单但非常有效 –

+27

div没有表语义，也没有解决 - 除了多个div之外 - 表格标题后面的滚动表体的问题。 – Javarome

2

嗨尝试用这种溢出-Y：滚动。我希望它可以帮助你

来源

2012-06-22 08:06:37 muthu

+1

overflow-y不是已知的css属性名称，并且失败 –

+0

使用div而不是表格 – muthu

3

jQuery插件可能是最好的选择。 http://farinspace.com/jquery-scrollable-table-plugin/

要固定头部，你可以检查这个帖子

Fixing Header of GridView or HtmlTable（THRE可能是问题，这应该在IE浏览器只）

CSS固定头

div#gridPanel 
{ 
    width:900px; 
    overflow:scroll; 
    position:relative; 
} 


div#gridPanel th 
{ 
    top: expression(document.getElementById("gridPanel").scrollTop-2); 
    left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
    position: relative; 
    z-index: 20; 
    } 

<div height="200px" id="gridPanel" runat="server" scrollbars="Auto" width="100px"> 
table.. 
</div>

或

很好的帖子在这里

How to Freeze Columns Using Javascript and HTML.

或

没有它不是可能的，但你可以利用的股利，并把表格

<div style="height: 100px; overflow: auto"> 
    <table style="height: 500px;"> 
    ... 
    </table> 
</div>

来源

2012-06-22 08:06:42

+0

它的工作原理但标题也滚动垂直我必须使tbody滚动与固定标题thead ..如果你想html代码，然后我把jsbin。 –

+0

它不是gridvies其只是html表..在CSS中获取错误表达式无效属性顶部 –

+0

@Nikhil - 这将工作在IE浏览器只有它更好你使用jQuery插件链接是由我在顶部anwwer给予将帮助你很容易实现你的任务。 –

4

要做到这一点你的表是严格分开成两个不同的表，最好的方法 - 标题和正文：

<div class="header"> 
    <table><tr><!-- th here --></tr></table> 
</div> 

<div class="body"> 
    <table><tr><!-- td here --></tr></table> 
</div> 

.body { 
    height: 100px; 
    overflow: auto 
}

如果你的表中有一个大的宽度（比屏幕宽度以上），那么你必须为水平滚动标题和正文同步添加滚动事件。

你不应该碰表标签（表，TBODY，THEAD，TFOOT，TR）与CSS属性显示和溢出。处理DIV包装是更可取的。

来源

2012-06-22 08:07:34 odiszapc

+1

+1，尽管使用“body”和“header”作为css类会让我觉得有点奇怪！ – Andomar

+2

将表格标题与其内容分离起来似乎是不好的做法。这就是'tbody'和'thead'的作用。 – You

+7

如果没有明确定义每个宽度，这些列将不会正确排列。这似乎不是一个好方法。 –

1

这是一个工作。

http://jsfiddle.net/JJV59/2/

[编辑]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

</head> 
<body> 

<table cellspacing="1" width="100%" bgcolor="#cccccc"> 
    <thead> 
     <tr> 
      <td bgcolor="#ffffff" width="70px"> 
      </td> 
      <td class="csstablelisttd" width="70px"> 
       <b>Time Slot&nbsp;</b> 
      </td> 
      <td class="csstablelisttd"> 
       <b>&nbsp;Patient Name</b> 
      </td> 
     </tr> 
    </thead> 
</table> 
<!-- THIS GIVES THE SCROLLER --> 
<div style="height: 500px; overflow-y: auto"> 
    <table id="tableAppointment" cellspacing="1" width="100%" bgcolor="#cccccc"> 
     <tbody> 
      <tr> 
       <td class="csstablelisttd" valign="top" width="70px"> 
        8:00AM 
       </td> 
       <td class="csstablelisttd" width="70px"> 
        0 
       </td> 
       <td class="csstablelisttd"> 
        <span>Name 1</span> 
       </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         9:00AM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         10:00AM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         11:00AM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         12:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         01:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         02:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         03:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         04:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         05:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         06:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         07:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         08:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
      </tbody> 
     </table>  
    </div> 

</body> 
</html>

来源

2012-06-22 08:10:10 Rishabh

+0

可以把你的整个html中的答案.in jsfiddle我unabele得到html –

+0

ru there.put html –

+0

道歉，误读你以前的评论，现在更新了答案 – Rishabh

16

只需添加显示：块到THEAD> tr和TBODY。检查下面的例子

http://www.imaputz.com/cssStuff/bigFourVersion.html

来源

2012-06-22 08:15:16 Viralk

+1

你好我很愚蠢。我如何使用这个例子？所有我看到的是该网站上的工作表:( – stackPusher

9

试试这个..这是工作...这里JSBIN

table tbody { height:300px; overflow-y:scroll; display:block; } 
table thead { display:block; }

来源

2012-06-22 08:15:40

+1

这是行不通的。在表格单元格周围添加边框，你会看到为什么。http://jsbin.com/iveroj/114/edit – Zilk

+0

该方法将工作如果你把滚动条的宽度作为标题的一部分，这可能比它的价值更麻烦。基本上你需要使标题的宽度比主体宽21px，以考虑滚动条宽度至少在Windows 7中运行的Chrome 34.0.1847.131 m中。 – nodonoghue

0

我与这一个打了一阵子。我的目标是创建一个带有标题的表格，其中每个标题列的宽度与相应的正文列相同，并且是适合数据所需的最小大小。身体数据也可以在标题下滚动。

我通过使用div而不是表格解决了这个问题。每个“表”都是一个div，头是div的div，body是div的div。我使用了上面@sushil所示的样式。我添加了一些javascript/jQuery来平衡列。也许20-30行。

不幸的是我丢失了代码，不得不重建它。我知道这有点旧，但也许会帮助别人。

来源

2014-11-30 12:48:50 AixNPanes

2

这里是我的解决方案（在春季与Thymeleaf和jQuery）：

HTML：

<!DOCTYPE html> 
<html 
    xmlns:th="http://www.thymeleaf.org" 
    xmlns:tiles="http://www.thymeleaf.org"> 
    <body> 
     <div id="objects" th:fragment="ObjectList"> 
      <br/> 
      <div id='cap'> 
       <span>Objects</span> 
      </div> 
      <div id="hdr"> 
       <div> 
        <div class="Cell">Name</div> 
         <div class="Cell">Type</div> 
       </div> 
      </div> 
      <div id="bdy"> 
       <div th:each="object : ${objectlist}"> 
         <div class="Cell" th:text="${object.name}">name</div> 
         <div class="Cell" th:text="${object.type}">type</div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

@CHARSET "UTF-8"; 
#cap span { 
    display: table-caption; 
    border:2px solid; 
    font-size: 200%; 
    padding: 3px; 
} 
#hdr { 
    display:block; 
    padding:0px; 
    margin-left:0; 
    border:2px solid; 
} 
#bdy { 
    display:block; 
    padding:0px; 
    margin-left:0; 
    border:2px solid; 
} 
#objects #bdy { 
    height:300px; 
    overflow-y: auto; 
} 
#hdr div div{ 
    margin-left:-3px; 
    margin-right:-3px; 
    text-align: right; 
} 
#hdr div:first-child { 
    text-align: left; 
} 
#bdy div div { 
    margin-left:-3px; 
    margin-right:-3px; 
    text-align: right; 
} 
#bdy div div:first-child { 
    text-align: left; 
} 
.Cell 
{ 
    display: table-cell; 
    border: solid; 
    border-width: thin; 
    padding-left: 5px; 
    padding-right: 5px; 
}

的javascript：

$(document).ready(function(){ 
    var divs = ['#objects']; 
    divs.forEach(function(div) 
    { 
     if ($(div).length > 0) 
     { 
      var widths = []; 
      var totalWidth = 0; 
      $(div+' #hdr div div').each(function() { 
       widths.push($(this).width()) 
      }); 
      $(div+' #bdy div div').each(function() { 
       var col = $(this).index(); 
       if ($(this).width() > widths[col]) 
       { 
        widths[col] = $(this).width(); 
       } 
      }); 
      $(div+' #hdr div div').each(function() { 
       var newWidth = widths[$(this).index()]+5; 
       $(this).css("width", newWidth); 
       totalWidth += $(this).outerWidth(); 
      }); 
      $(div+' #bdy div div').each(function() { 
       $(this).css("width", widths[$(this).index()]+5); 
      }); 
      $(div+' #hdr').css("width", totalWidth); 
      $(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0)); 
     } 
    }) 
});

来源

2014-12-03 15:59:49 AixNPanes

如何使html表格垂直滚动

回答

相关问题