【问题标题】：<table><tbody> scrollable?<table><tbody> 可滚动？
【发布时间】：2011-07-17 18:04:57
【问题描述】：

我想要一个右侧有滚动条的表格。
我想在没有任何插件（jQuery）的情况下仅使用 css 来完成此操作。
表头应该保持固定。

我需要做什么才能让它工作？

【问题讨论】：

请参考stackoverflow.com/questions/130564/…

【解决方案1】：

从 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>

【讨论】：

【解决方案2】：

<!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>

【讨论】：

对我来说效果很好，我正在使用引导程序。我只是为每个表属性添加了一个类，将表包装在 div 中，效果很好。所以这样我只能在特定的 div 及其子元素（表格元素）上调用它。我只是删除了thead 高度，因为它添加了一个额外的条。否则很棒！！！

【解决方案3】：

这个简单的 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>

【讨论】：

【解决方案4】：

这是解决方案，

表头固定，表内内容可滚动。

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;}

【讨论】：

这可以通过放弃自动调整内容的列宽来实现。

【解决方案5】：

你已经完成了一项任务，如果你成功了，你就会成为英雄。我尝试了这个和简单的事情——定位：固定； -- 是不可能的。我不得不将所有复制到一个新对象中。但是当你这样做时，元素的水平间距都消失了，因此标题不再与对齐。我最终做了这样的事情：

首先，放弃ie6和ie7。那些家伙没有希望了。

制作表格的两份副本，一份是正文不可见而可见，另一份则相反。
给出 z-index:1;到带有可见的表。
给出 z-index:0;到带有可见
的表。
处理水平滚动，但直到你发现 onScroll 不是一个 ie8 事件（更不用说 ie6），所以你必须每隔十分之一秒左右休息一次 setInterval just 来处理在 ie8 中左右滚动。
这将为您提供一个在两个轴上无限滚动的表格主体，一个表格头部仅在 x 轴上滚动。几乎可以在 FF、Chrome 和 Safari 中使用。但是在ie8中不稳定。真正的皮塔饼。

祝你好运，如果你成功了，请写信！
【讨论】：
- 我最终使用了第二个表并在的末尾添加了一个额外的（空）
  One Two
  然后将其宽度设置为 16 像素，使其对齐...在此之下我有第二个表格...标题没有 100% 排队，但已经足够了……：D
- @JNK，对你有好处！很高兴你能认识到它“足够好”，实际上，它已经完成了。
- 老实说，这个答案似乎不正确。我明白你在说什么，但即使如下面的链接所示，这当然是可能的。诀窍是显式设置 tbody 的高度，而不是试图让它从父元素继承。避免显式设置 tbody 高度的一种理想方法可能是简单地创建一个 jQuery 插件，将 tbody 的高度设置为容器的高度减去头的高度。
- 谢谢@PeteWilson。我已经尝试过您的解决方案，它适用于 Firefox 24.0

【解决方案6】：

这行得通，把它从我的网站上取下来了：

#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

【讨论】：

但在这两个页面上，整个表格（包括标题）直接滚动到页面之外。是的，如果你只滚动表格主体，它就会很好用。但是，如果表格是真实的、真实的、真实的、真实的、真实的、非常宽的，我想使用页面滚动条，同时保持标题始终在顶部可见。只是 imo，当然。
尝试在 ie7 或 ie8 上打开这个如果它从那里工作将是一个奇迹。 :)

【解决方案7】：

只有 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>

【讨论】：

IE 根本不支持。基于 Webkit 的浏览器也没有。只有 FF2/3 和某些 Opera 支持它。然而，新的 FF4 将 not 不再支持它。这不是 W3 规定的。
对于任何版本的 IE，以上内容都不是带有固定标题的可滚动 tbody。