1. 首页
  2. 问答
  3. <table><tbody>可滚动吗？

<table><tbody>可滚动吗？

2011-03-17 89 views
35

我想在右侧有一个滚动条的表格。
我想在没有任何插件（jQuery）的情况下用css来完成此任务。
表头应该保持不变。<table><tbody>可滚动吗？

我需要做些什么才能使这个工作？

来源

2011-03-17 JNK

+0

请参阅 http://stackoverflow.com/questions/1 30564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put – Santhanakumar 2012-12-02 09:55:02

回答

37

你已经采取了一项任务，如果你成功了，将让你成为英雄。我尝试了这个和直接的事情 - 定位：固定; - >是不可能的。我不得不将所有的< thead>复制到一个新的对象中。但是当你这样做时，< th元素的水平间距全部消失，所以标题不再与< td> s一致。我结束了这样的事情：

首先，放弃ie6和ie7。这些人没有希望。

  1. 使表，一个在身体看不见的两个副本和< THEAD>是可见的，并在它的反之亦然其他。

  2. 给z-index：1;到可见的< thead表中。

  3. 给z-index：0;到可见的< tbody>的表格。

  4. 与水平滚动交易，但直到你找到后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

相关问题

 相关问题