37

你已經採取了一項任務，如果你成功了，將讓你成爲英雄。我嘗試了這個和直接的事情 - 定位：固定; - >是不可能的。我不得不將所有的< thead>複製到一個新的對象中。但是當你這樣做時，< th元素的水平間距全部消失，所以標題不再與< td> s一致。我結束了這樣的事情：

首先，放棄ie6和ie7。這些人沒有希望。

使表，一個在身體看不見的兩個副本和< THEAD>是可見的，並在它的反之亦然其他。
給z-index：1;到可見的< thead表中。
給z-index：0;到可見的< tbody>的表格。
與水平滾動交易，但直到你找到後onScroll不是IE8的事件（更不用說IE6），所以，你必須採取的setInterval打破每隔十分之一秒左右只是在ie8中處理滾動< thead> left和right。

這會給你一個兩軸無限滾動的表體，只有一個表頭可以在X軸上滾動。在FF，Chrome和Safari中相當有用。但在ie8中搖搖欲墜。一個真正的皮塔餅。

祝你好運，並請寫，如果你得到這個工作！

來源

2011-03-17 21:41:28

+0

我最終使用的第二表和在

一個	兩個

末端添加額外的（空），然後設置它的寬度爲16 PX所以它排隊...下面我有第二張桌子...標題不排列100％，但它足夠好...：D – JNK 2011-03-17 22:05:35

+2

@JNK，對你有好處！而且，能夠認識到「足夠好」的關鍵點非常出色，實際上，這一切都已經完成。 – 2011-03-18 10:25:40

+0

老實說這個答案似乎不對。我明白你的意思，但即使如下面的鏈接所示，它肯定是可能的。技巧是明確設置tbody的高度，而不是試圖讓它從父元素繼承。有一個理想的方法可以明確地設置tbody的高度，只需創建一個jQuery插件，將tbody的高度設置爲容器的高度減去thead的高度。 – teh1 2013-05-14 22:29:02

5

只有Firefox和IE6-7瀏覽器都支持內置<tbody>滾動：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Scrolling</title> 
    <style type="text/css"> 
     div.content 
     { 
      border: #000000 1px solid; 
      height: 400px; 
      overflow-y: auto; 
      width: 800px; 
     } 

     .fixedHeader 
     { 
      white-space: nowrap; 
     } 

     .fixedHeader tr 
     { 
      height: auto; 
      position: relative; 
     } 

     .fixedHeader tr td 
     { 
      background-color: #778899; 
      border: #000000 1px solid; 
      text-align: center; 
     } 

     tbody.scrollContent 
     { 
      overflow-x: hidden; 
      overflow-y: auto; 
      height: 370px; 
     } 

     .scrollContent tr td 
     { 
      background-color: #C0C0C0; 
      border: #000000 1px solid; 
      padding-right: 22px; 
      vertical-align: top; 
     } 
    </style> 
    <!--[if IE]> 
    <style type=text/css> 
     div.content 
     { 
      overflow-x: hidden; 
      overflow-y: auto; 
     } 
    </style> 
    <![endif]--> 
</head> 
<body> 
<div> 
    <div class="content"> 
     <table cellspacing="0"> 
      <thead class="fixedHeader"> 
       <tr> 
        <td>Cell 1</td> 
        <td>Cell 2</td> 
        <td>Cell 3</td> 
        <td>Cell 4</td> 
       </tr> 
      </thead> 
      <tbody class="scrollContent"> 
       <tr> 
        <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td> 
        <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td> 
        <td>Pages can be displayed either with or without tabs. </td> 
        <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>    
</body> 
</html>

來源

2011-03-17 21:27:23 Mikhail

+0

在WinXP上的Opera 11.x中也可以使用。 – stealthyninja 2011-03-17 21:31:31

+6

如果這樣做我會...我會......好吧，我會流淚純粹的快樂。 – 2011-03-17 21:46:04

+2

IE根本不支持它。基於Webkit的瀏覽器也沒有。只有FF2/3和某些歌劇確實支持它。然而，新的FF4將[不]（https://developer.mozilla.org/En/Firefox_4_for_developers#Miscellaneous_CSS.c2.a0changes）支持它。這不是由W3指定的。 – BalusC 2011-03-17 21:57:23

-1

這工作，把它恰好是我的網站：

#news_box { 
overflow: scroll; 
overflow-x: hidden; 
}

編輯：我也剛剛發現這個有一個很好的例子：
http://www.imaputz.com/cssStuff/bigFourVersion.html

這裏的另一個很好的文章就可以了：
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

來源

2011-03-17 21:47:45 PiZzL3

+1

但在這兩頁上，整個表格 - 包括thead - 直接從頁。是的，如果你只滾動表體，它的效果很好。但是，如果表格是真實的，真實的，真實的，真正的廣泛的，我想使用頁面滾動條，同時始終保持頁眉可見。當然，只是imo。 – 2011-03-17 22:09:32

+0

嘗試在ie7或ie8上打開這一個，如果它從那裏工作，那將是一個奇蹟。 :) – 2011-11-17 04:56:05

+0

試試這個：http://stackoverflow.com/a/21250481/2837412 – 2014-01-21 06:13:07

3

這裏是解決方案，

表固定標題和表內的內容可以滾動。

HTML部分

<div class="table_wrapper"> 
    <div class="header"> 
     <div class="head1">Left</div> 
     <div class="head2">Center</div> 
     <div class="head3">Right Column</div> 
    </div> 
    <div class="tbody"> 
     <table> 
      <tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr> 
      <tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr> 
      <tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
      <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> 
     </tbody></table> 
    </div> 
</div>

CSS部分

.table_wrapper {background:tomato;border:1px double olive;float:left;} 
.tbody{height:80px;overflow-y:auto;width:400px;background:yellow;} 
table{border-collapse:collapse; width:100%;} 
td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;} 
.td3{border-right-width:0;} 

.header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;} 
.header div{padding:1px 5px;float:left;border-right:1px solid orange;} 
.header .head3{float:none;border-right-width:0;} 
.head3 span{padding-left:5px;} 

.td1{width:100px;} 
.td2{width:140px;} 
.header .head1{width:100px;} 
.header .head2{width:140px;}

來源

2013-04-17 12:34:48 Vinayagam

+1

這是通過放棄自動調整列寬到內容的大小來實現的。 – 2014-06-18 12:56:22

0

這個簡單的CSS應該做的伎倆：如果你需要它

table.table-scroll-body { 
    position: relative; 
    height: 200px; } 

    table.table-scroll-body tbody { 
    position: absolute; 
    width: 100%; 
    max-height: 150px; 
    overflow: auto; }

和HTML ..

<table class="table-scroll-body"> 
    <thead> 
    <th>Header 1</th> 
    <th>Header 2</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Some content..</td> 
     <td>Some content..</td> 
    </tr> 
    <tr> 
     <td>Some content..</td> 
     <td>Some content..</td> 
    </tr> 
    <tr> 
     <td>Some content..</td> 
     <td>Some content..</td> 
    </tr> 
    </tbody>

來源

2014-06-18 21:25:53

1

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     table 
     { 
      width: 320px; 
      display: block; 
      border:solid black 1px; 
     } 

     thead 
     { 
      display: inline-block; 
      width: 100%; 
      height: 20px; 
     } 

     tbody 
     { 
      height: 200px; 
      display: inline-block; 
      width: 100%; 
      overflow: auto; 
     } 

     th, td 
     { 
      width: 100px; 
      text-align:center; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <th>Column 1</th> 
       <th>Column 2</th> 
       <th>Column 3</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

來源

2015-10-26 11:57:57 astrandr

+1

這是我的版本...安德烈Batchvarov – astrandr 2015-10-26 11:58:46

+0

工作對我很好，我使用bootstrap。我只是在每個表屬性前面加上一個類，在div中包裝表格，這個工作很好。所以這樣我可以只在特定的div和它的子元素（表元素）上調用它..我剛剛刪除了高度，因爲它添加了一個額外的條。否則很棒！ – eaglei22 2016-11-30 15:18:03

+0

不適用於100％寬度的表格嗎？ https://jsfiddle.net/jgngg28t/ – Sean 2017-02-24 10:02:05

0

妖異astrandr的答案..這裏是我做到了，用他們的例子：

CSS：

.transactHistory table 
{ 
    width: 320px; 
    display: block; 
} 

.transactHistory thead 
{ 
    display: inline-block; 
} 

.transactHistory tbody 
{ 
     height: 133px; 
     display: inline-block; 
     width: 100%; 
     overflow: auto; 
} 

.transactHistory th 
{ 
     width: 100px; 
     text-align:center; 
} 

.transactHistory tr 
{ 
     width: 100px; 
     text-align:center; 
} 

.transactHistory td 
{ 
     width: 100px; 
     text-align:center; 
}

表：

<div class="transactHistory"> 
    (..table code) 
</div>

來源

2016-11-30 15:43:00 eaglei22

<table><tbody>可滾動嗎？

回答

HTML部分

<table><tbody>可滾動嗎？

回答

HTML部分

相關問題