Hi,
Please refer http://www.jayakumar.net/scroll/test.html
We can see that the container div scrolls both horizontally and vertically. Is it possible to make the header in the table fixed (stay in the same place), when the table is scrolled vertically.
I have seen examples where only vertical scroll is there. But here I have both scrolls. Please help.
Regards
Jai
It would be if the header was at its own div and that div was positioned as fixed.
I have tried. But once we make it ‘fixed’, then it breaks out of the scroll area. Please try.
And you know that Google is your best friend, don’t you? Here’s someone that did just what you want to do 
I had gone through this site also. Note that this doesn’t work when there’s horizontal scroll. In the site they have only 3 columns. But what if more than 10 columns and both scrolls. That’s what exactly I am looking for.
For the horizontal scroll you will have to apply CSS to the table, give it a width dimension and play with the overflow-y property. Something like
<style type="text/css">
.scrollable { width:300px; height:400px; overflow-x:auto; clip-rect:(0px, 300px, 400px, 0px); }
</style>
Are you mentioning the table in the site http://www.imaputz.com/cssStuff/bigFourVersion.html# or my example?
I’m not mentioning any table in particular, just saying that you can apply this code to your table as a whole and that would take care of the horizontal scroll, while the vertical should only be apply to the data section. If you use THEAD and TBODY elements, it is easy to know which is which.
Thanks for the reply. Let me check and will get back to you.
There is a javascript solution here.
We had a css quiz a while ago that showed how to make the header fixed with css only and only using one table. However it doesn’t allow for the header to be scrolled horizontally with the data. The header will stay fixed in position (although it doesn’t use position:fixed because that can’t be used in situations like this).
Using the method shown in the quiz we can get close to what you want but the problem is that you have to scroll left to use the scrollbar (although you can scroll with the mousewheel).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
margin:0 0 1em
}
table p {
margin :0
}
.wrap {
margin:50px 0 0 2%;
float:left;
position:relative;
overflow:hidden;
padding:25px 0 0;
background:#fffccc;
border:1px solid #000;
width:500px;
}
.inner2 {
float:left;
width:100%;
height:200px;
position:relative;
padding:30px 0 17px;
overflow-y:hidden;
overflow-x:auto;
background:red;
}
.inner {
width:900px;
float:left;
height:200px;
overflow-y:auto;
overflow-x:hidden
}
table {
width:900px;
margin:0 0 0 -1px;
border-collapse:collapse;
float:left;
}
td {
padding:5px;
border:1px solid #000;
text-align:center;
background:yellow;
}
tfoot th, thead th {
font-weight:bold;
text-align:left;
border:1px solid #000;
padding:0 3px 0 5px;
background:#ffffcc;
}
thead th {
border:none;
}
thead tr p {
position:absolute;
top:0;
}
.last {
padding-right:15px!important;
}
</style>
</head>
<body>
<h1>Table with fixed header</h1>
<p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
<p>You will be limited by the position of the header rows elements though as they can't really me moved around anymore thatn they are now.</p>
<div class="wrap">
<div class="inner2">
<div class="inner">
<table id="data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><p>Jan</p></th>
<th><p>Feb</p></th>
<th><p>Mar</p></th>
<th><p>Apr</p></th>
<th><p>May</p></th>
<th><p>Jun</p></th>
<th><p>Jul</p></th>
<th><p>Aug</p></th>
<th><p>September</p></th>
<th><p>Oct</p></th>
<th><p>Nov</p></th>
<th class="last"><p>Dec</p></th>
</tr>
</thead>
<tfoot>
<tr>
<th><p>Jan</p></th>
<th><p>Feb</p></th>
<th><p>Mar</p></th>
<th><p>Apr</p></th>
<th><p>May</p></th>
<th><p>Jun</p></th>
<th><p>Jul</p></th>
<th><p>Aug</p></th>
<th><p>September</p></th>
<th><p>Oct</p></th>
<th><p>Nov</p></th>
<th class="last"><p>Dec</p></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class="last">3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class="last">7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td>6</td>
<td class="last">6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class="last">6</td>
</tr>
<tr>
<td>2</td>
<td>3 with more data</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>8</td>
<td class="last">6</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td class="last">3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>23</td>
<td class="last">6</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>2</td>
<td>67</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td class="last">4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>65</td>
<td class="last">4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>13</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td class="last">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You could obviously do it by removing the header data into another element but then it wouldn’t match the table table data unless you had a fixed width for the cells.
Hi,
Will go through your solution and get back. Could not check the forum yesterday.
Hi Paul O’B,
Right now I have implemented your solution (as in quiz). But is it possible to have both the scrolls (horizontal and vertical) in a single div?
I also came across a jquery solution. Please refer http://www.tablefixedheader.com/demonstration/
The download package has php files. So could not implement on static html page. If somebody can, it would be useful.
No, unfortunately the closest I could get was in my code example above.
I also came across a jquery solution. Please refer http://www.tablefixedheader.com/demonstration/
The download package has php files. So could not implement on static html page. If somebody can, it would be useful.
I posted a link to a javascript solution that may be easier to manage in my first post if it’s of any help…
You mean the scrollbars will also have other stuff inside it, such as text? It’s possible, but I’d prefer not writing up the code if this isn’t what you meant.
Thank you Paul. Nice to have a discussion with you.
Hi Ryan,
In the example provided by Paul, horizontal and vertical scroll bars are in separate divs. I was asking whether both scrolls can be included in the same div so that both will be visible always. Now the vertical scroll bar appears only when we scroll to right. Header remains static always.
I think Ryan misunderstood the question a little
It’s not possible to have both on the same element and have the header static etc. I think the only real solution is the scripting option (but then again I always say “never say never” :)).
I am using your solution right now, Paul. Thanks again.
Glad it was of some use