如何使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表格垂直滾動

回答

相關問題