scrollable?

2019-01-08 12:23发布

站内问答 / HTML/CSS
588 7 5

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?

标签： html css scroll
举报
7条回答
Rolldiameter
2楼-- · 2019-01-08 12:47

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.

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

  2. Give z-index:1; to the table with the visible <thead>.

  3. Give z-index:0; to the table with the visible <tbody>.

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

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-01-08 12:47

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>
查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2019-01-08 12:47

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>
查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
5楼-- · 2019-01-08 12:47

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

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
6楼-- · 2019-01-08 12:52

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>
查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
7楼-- · 2019-01-08 12:55

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;}
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)
向帮助了您的知道网友说句感谢的话吧!