10

I've a table with 2 columns and each column is 800px wide. I want to show this table in 800x50 window. So there should be horizontal and vertical scrollbar to view complete table.

While I've found few related solutions (this and this) on SO, they only work if table width is smaller than screen size. In my case screen size is 1200px and total table width is 1600px.

How could I do this? i want to achieve something like this.

EDIT Oops, I forgot to add one more requirement. Sorry. I want the header of the table to remain fixed while user scrolls table.

EDIT2

I've tried below mentioned solutions to wrap in a div, but in this case vertical scrollbar doesn't show up. Please see this table with wrapper div. It seems this problem only occurs if table width is bigger than screen size. I'm testing on FF3.6.

EDIT3

current table code. This has no vertical scroller even though I can scroll vertically.

<div style="overflow:scroll; width:800px;height:50px" >
<table style="width:1600px" border="1">
  <thead>
    <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_1</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>
  </tbody>
</table>
</div>
Community
  • 1
  • 1
understack
  • 11,212
  • 24
  • 77
  • 100
  • I'm sorry, but 800x50 is an unusable dimension. Scrollbars alone take up about 20px, which leaves you about 30px to play with ... so you're asking your users to scroll with one or two rows visible at a time? Sure you didn't mean 800x500? – Robusto Apr 13 '10 at 18:42
  • Those are fake numbers, I just want to make this table work and then change dimensions accordingly. – understack Apr 13 '10 at 18:44

5 Answers5

8

You could wrap the table in a div that has a fixed-size (800x50) and set overflow:scroll.

Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
  • 1
    @Vivin Paliath :I don't see vertical scroll with this when table length is bigger than screen size. Please see this : http://jsbin.com/uwubu3/3 – understack Apr 13 '10 at 18:52
  • I see the scrollbars fine when I open it. Do you mean window-size? If the table is bigger than the window-size, you will need to scroll the whole page to see the scrollbars. There is no way to get around that then to resize your table to the size of the window. – Vivin Paliath Apr 13 '10 at 19:36
  • I don't see the scrollbars either, but I believe that is because your height is to small. Try setting your height to 100px, and it will work fine. – Jeff B Apr 13 '10 at 20:01
1

Put your table in a div with width < 800, and set overflow: scroll.

Jeff B
  • 29,943
  • 7
  • 61
  • 90
0

I don't know if it would work, but have you tried setting max-width: 100% for the page?

animuson
  • 53,861
  • 28
  • 137
  • 147
0

Just add overflow:scroll to the css of your table element. Btw. your example doesn't show any scrolling.

Paul de Vrieze
  • 4,888
  • 1
  • 24
  • 29
0

If you want the header to remain fixed you just do some css

#header {
  position:fixed;
  left:0;
  top:0;
}
Catfish
  • 18,876
  • 54
  • 209
  • 353