Html <table><tbody> 可滚动？

Question

提问by JNK

I would like to have a table with a scrollbar to the right.
I want to accomplish this without any plugins(jQuery) just with css.
The table header is supposed to stay fixed.

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

What do I need to do to get this working?

我需要做什么才能让它发挥作用？

Answer 1

回答by Pete Wilson

You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing -- to position:fixed; the <thead> -- is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all goes away so the headings don't line up with the <td>s anymore. I ended up doing something like this:

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

First of all, abandon ie6 and ie7. There's no hope for those guys.

首先，放弃ie6和ie7。那些人没希望了。

Make two copies of the table, one where the body is invisible and the <thead> is visible, and the other where it's vice-versa.
Give z-index:1; to the table with the visible <thead>.
Give z-index:0; to the table with the visible <tbody>.
Deal with horizontal scrolling, but not until after you find that onScroll isn't an ie8 event (not to mention ie6), so that you have to take a setInterval break every tenth of a second or so justto handle scrolling the <thead> left and right in ie8.

制作表格的两份副本，一份是身体不可见而 <thead> 是可见的，另一份是相反的。
给 z-index:1; 到带有可见 <thead> 的表。
给 z-index:0; 到带有可见 <tbody> 的表。
与横向滚动处理，但直到后，你会发现onScroll不是IE8的事件（更不用说IE6），所以，你必须采取的setInterval打破每隔十分之一秒左右，只是处理滚动<THEAD> ie8中的左右。

This will give you a table body of infinite scroll in both axes, with a table head that scrolls in the x axis only. Pretty much works in FF, Chrome, and Safari. But is shaky in ie8. A real pita.

这将为您提供一个在两个轴上无限滚动的表格主体，表格头仅在 x 轴上滚动。几乎适用于 FF、Chrome 和 Safari。但是在ie8中摇摇欲坠。真正的皮塔饼。

Good luck, and please write if you get this to work!

祝你好运，如果你让它工作，请写下来！

Answer 2

回答by Mikhail

Only the Firefox and IE6-7 browsers support the built-in <tbody>scrolling:

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

Answer 3

回答by Vinayagam

Here is the solution,

这是解决方案，

Table fixed header and the content inside the table can be scrollable.

表格固定标题和表格内的内容可以滚动。

HTML Part

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 Part

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

Answer 4

回答by astrandr

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

Answer 5

回答by eaglei22

branching off of astrandr's answer.. here is how I did it, using their example:

分支出 astrandr 的答案......这是我如何做到的，使用他们的例子：

css:

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

Table:

桌子：

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

Answer 6

回答by Adam Nicholson

This simple CSS should do the trick:

这个简单的 CSS 应该可以解决问题：

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

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

And the HTML if you need it..

如果需要，还有 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>

Answer 7

回答by PiZzL3

This works, took it right off my website:

这有效，从我的网站上拿下来：

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

EDIT: I also just found this with a nice example:
http://www.imaputz.com/cssStuff/bigFourVersion.html

编辑：我也刚刚用一个很好的例子找到了这个：http:
//www.imaputz.com/cssStuff/bigFourVersion.html

Here's another good article on it:
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

这是另一篇关于它的好文章：http:
//www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

Html <table><tbody> 可滚动？

提问by JNK

回答by Pete Wilson

回答by Mikhail

回答by Vinayagam

HTML Part

HTML 部分

回答by astrandr

回答by eaglei22

回答by Adam Nicholson

回答by PiZzL3

相关推荐

最近更新

标签

Html <table><tbody> 可滚动？

提问by JNK

回答by Pete Wilson

回答by Mikhail

回答by Vinayagam

HTML Part

HTML 部分

回答by astrandr

回答by eaglei22

回答by Adam Nicholson

回答by PiZzL3

相关推荐

Html 如何使用javascript获取DIV的内部文本？

Html Chrome 未显示 SVG 文件

Html 防止在 HTML5 中滚动

减少 HTML <UL> 和 <LI> 元素之间的差距

相关推荐

最近更新

标签