scrollable?

2019-01-08 12:52发布

站内文章 / HTML/CSS

15 0

来，给爷笑一个

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

What do I need to do to get this working?

回答1:

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:

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

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 just to handle scrolling the <thead> left and right in 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.

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

回答2:

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

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

回答3:

Here is the solution,

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

HTML Part

<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

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

回答4:

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

回答5:

This simple CSS should do the trick:

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

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

回答6:

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

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>

回答7:

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

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

标签： html css scroll

来，给爷笑一个

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

登录后发表评论

0条评论

还没有人评论过~

问题:

回答1:

回答2:

回答3:

HTML Part

回答4:

回答5:

回答6:

回答7:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮