1

I've this sample table and I want to make header row of table visible all the time. Header row should scroll with horizontal scrollbar and shouldn't scroll with vertical scrollbar.

table:

<div style="width:800px; height:150px;overflow:scroll;margin:50px auto;"> <table style="width:1600px" border="1"> <thead style=""> <tr> <th style="width:800px">id_1</th> <th style="width:800px">id_2</th> </tr> </thead> <tbody style=""> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> </tbody> </table> </div>

How can I do this with css only? Suggestions in this and this thread didn't seem to work, possibly due to presence of scrollbars.

EDIT

I'm looking for a css solution. Table structure and layout can't be changed. Other than this there is no restriction on html.

Improve this question
1

3 Answers 3

Reset to default
1

This solution doesn't require any div. Just css and a few Jquery lines.

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table id="mytable"> <thead class="fixedHeader"> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody class="scrollContent"> <tr> <td><td> <td><td> <td><td> <td><td> <td><td> <tr> </tbody> </table> </body> <html>

//css

 #mytable{ position: absolute; top:3.2em; } #mytable thead.fixedHeader tr{ width:100%; height:2.3em; position: fixed; display: block; /*The background to be replaced by your own pix or color*/ background: url('img/bluegrad.png') 0 0 repeat-x; top:4.3em; } #mytable tbody.scrollContent { width: 100%; } //JQuery $(function(){ //get all th from the table //get all td from the table //td number has to be equal th number to avoid trouble var ths = $('table#my_table tr:nth-child(1) th'); var tds = $('table#my_table tr:nth-child(2) td'); $(tds).each(function(idx){ //for each td get width //and pass to corresponding th var w = $(this).width(); $(ths).eq(idx).width(w); }); })
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can use CSS's position:fixed coupled with some other properties to achieve that.

See this for more information.

Improve this answer

1 Comment

position:fixed won't work because header has to scroll with horizontal scrollbar.
0

Try this, using 2 divs

<div style="width:800px; margin:0 0 0 0;"> <table width="800" border="1" cellpadding="3"> <thead style=""> <tr> <th style="width:400px">id_11</th> <th style="width:400px">id_2</th> </tr> </thead> </table> </div> <div style="width:820px; height:150px;overflow:scroll;margin:0 0 0 0; overflow-x: hidden;"> <table width="800" border="1" cellpadding="3"> <tbody style=""> <tr><td style="width:400px">1200</td><td style="width:400px">1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> <tr><td>1200</td><td>1200</td></tr> </tbody> </table> </div>

alt text

Improve this answer

1 Comment

unfortunately I can't use this work around since in my case thead has to be present inside table to make other javascript things work. Besides column width in your case is 400px which has to be 800px. It makes a special case because total table width in my case is 1600px which is wider than my screen. Hence horizontal scrollbar is always required.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.