滚动？<TABLE> <TBODY> </TBODY> </TABLE>

时间：2011-03-17 21:19:52

标签： html css scroll

我想在右边有一个带滚动条的桌子 我想在没有任何插件（jQuery）的情况下用css实现这一点 表头应该保持固定。

我需要做些什么来实现这个目标？

7 个答案:

答案 0 :(得分：38)

你已经完成了一项任务，如果你成功了，你会成为英雄。我尝试了这个和直截了当的事情 - 定位：固定; ＆lt; thead＆gt; - 是不可能的。我不得不复制所有＆lt; thead＆gt;进入一个新的对象。但是当你这样做时，第二个的水平间距是元素全部消失，因此标题不再与＆lt; td＆gt;排成一行。我最终做了这样的事情：

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

  1. 制作表格的两个副本，一个是身体不可见的副本，另一个是＆lt; thead＆gt;是可见的，而另一个则反之亦然。

  2. 给z-index：1;到可见＆lt; thead＆gt;。

    3. 的表格

  3. 给z-index：0;到可见＆lt; tbody＆gt;。

    4. 的表格

  4. 处理水平滚动，但直到你发现onScroll不是ie8事件（更不用说ie6）之后，你必须每隔十分之一秒左右取一个setInterval中断只需来处理滚动＆lt; thead＆gt;在ie8中左右。

    5. 这将为您提供两个轴上无限滚动的表体，其中一个表头仅在x轴上滚动。几乎适用于FF，Chrome和Safari。但在ie8中是不稳定的。一个真正的皮塔饼。

    祝你好运，如果你让它发挥作用，请写下来！

答案 1 :(得分：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>

答案 2 :(得分：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;}

答案 3 :(得分：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>

答案 4 :(得分：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>

答案 5 :(得分：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>

答案 6 :(得分：-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

相关问题
最新问题