3

I have created a fixed header using CSS (mainly just setting the position of the thead to be fixed), but the problem that I run in to is if the user's resolution size or window size is smaller than the tables size, I need to add in a horizontal scroll bar so that they can see everything. i have tried setting overflow to be auto and scroll, but only when I scroll down to the bottom of the page does the scroll bar appear. Also I need to be able to have the thead scroll with the table. Any suggestions on having the horizontal scroll bar appear if the window is smaller than the tables size and how to have the thead still be fixed in one position but still scroll to see more of the thead if the window size is too small?

http://jsfiddle.net/E9mqk/1/

The HTML is:

<div class="table-wrapper">
<table id="table-information">
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead class="table-fixed-header" id="table-data">
        <tr>
            <th>Something 1</th>
            <th>Something 2</th>
            <th>Something 3</th>
            <th>Something 4</th>
            <th>Something 5</th>
            <th>Something 6</th>
            <th>Something 7</th>
            <th>Something 8</th>
        </tr>
    </thead>
    <tbody class="table-body">   
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
</div>

And the CSS is:

.table-wrapper {
    overflow-x: scroll;
}
.table-fixed-header {
    position: fixed;
}
#table-information tbody:before {
    line-height: 30px;
    content:"-";
    color:white; /* to hide text */
    display:block;
}
#table-information td {
    max-width: 100px;
    min-width: 100px;
}
#table-information th {
    max-width: 100px;
    min-width: 100px;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1399078
  • 167
  • 2
  • 4
  • 8
  • 1
    Provide a [jsFiddle](http://jsfiddle.net) explaining the problem won't help much .. – user2129623 Mar 20 '13 at 19:42
  • This is an incorrect use of the colgroup tag. This table structurally contains only one colgroup with eight col elements. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col – 2C-B Jan 16 '15 at 17:29

1 Answers1

1

Assuming you're not doing something in Javascript which produces strange behavior on tables, you can just wrap the table in a 

 <div style="overflow-x: scroll;">
   [your table here]
 </div>

or some other block element with the same style, and you'll get the behavior you seek, including the head and body scrolling along with one another -- see this jsfiddle for a working example.

Aaron Miller
  • 3,692
  • 1
  • 19
  • 26
  • Of course, if your problem is not that you can't get a scrollbar to appear, but rather that you can't get the scrollbar to show up anywhere except below the table, that changes things -- best advice on that would be, in Javascript, set a height and max-height on the container div which are less than the user's window.innerHeight, and also set overflow-y: scroll; on the container div so that the user can scroll in both directions to view all of the table. Not a really good solution, I grant; if possible, I'd recommend doing something else entirely, but if you can't, this might get you going. – Aaron Miller Mar 20 '13 at 19:51
  • Yeah, I saw that the scroll bar would only be seen at all times is when I set the height of the container div to be smaller than the window size. So I might have to do something using js. Any thoughts about the fixed header? To get that to scroll along with the table? – user1399078 Mar 20 '13 at 20:06
  • You shouldn't have to do anything special to get the thead to scroll with the table -- the thead lives inside the table element, so if you're scrolling a container around the whole table, it should bring the thead along with it, just as with the tbody. Can you post a link to an example of what you're working with, so I can see what's going on? – Aaron Miller Mar 20 '13 at 20:09
  • I added the jsfiddle. As you can see, the body scrolls, but not the header. – user1399078 Mar 20 '13 at 20:25
  • Why do you need position: fixed; on the table header? Removing it allows the header to scroll with the body, and I'm not sure what good it could be doing to have it there in the first place. I've edited the jsfiddle accordingly; take a look, and let me know if that solves the problem. – Aaron Miller Mar 20 '13 at 20:49
  • The amount of data I have is so long that you would need to scroll down in the body and I needed to keep the table header fixed so that they could see the header as they're scrolling down the list. – user1399078 Mar 20 '13 at 20:57
  • Huh. There should be a way to do what you're after, but I can't see what it is -- sorry I can't be of more help. – Aaron Miller Mar 20 '13 at 21:16
  • Its fine, I really do appreciate you trying to help anyways. Maybe I am just digging myself too deep and should try an alternate route. – user1399078 Mar 20 '13 at 21:19