If I use a fixed width and overflow: auto then I can get scrollbars but I can't use the available width of the screen.

If I use no width then the table uses all available width but forces the document itself to have scrollbars when the browser window is too narrow.

How can I get the best of both worlds? Is there a non-javascript solution?

PS Did I mention this needs to work in IE6 too? :-)

To clarify: The table is 100% the width of it's container (in this case a table cell but don't worry - I've got an official permit) rather than 100% of the browser width. I want it to have fluid width and height but if the browser window is too narrow to contain it I want the table to have scrollbars rather than the document.

1 answer

Ktash 1851

I'm not sure why you want scrollbars on the table and not the document, but I'm sure there are a few reasonable ways to accomplish this. If you set a fixed width, and have a border, my guess is that its applying the box model which is why you have scrollbars. If you wrap the table in a div with width: 100%; position: relative; overflow: auto; that should allow you to leave the width of the table and get the effect. If you can be more specific on why you're trying to accomplish this, than maybe I can point to a better solution.

Okay, so here is an update on my answer above based on the comment. If I understand correctly, the table cell it is contained within should be able to have an overflow auto on it...? Maybe i'm not understanding or I'm thinking to small scale. It honestly sounds like you're doing table based layouts, which is ill-advised in my opinion. But that's preference. However, if I understand, the cell is sized based on a percentage of the page.

If you want the table inside flush against the edges, except when it is too big, you can, like I said, nest it in a div. It would looks something like:

<td style="position: relative;">
    <div style="width: 100%; height: 100%; overflow: auto; min-width: 400px;">

where min-width is the minimum size of the table. Don't believe it is needed, but it can be used to make it look a little nicer.

Answered over 8 years ago by Ktash
  • I've added a clarification to my question which hopefully helps. The problem seems to be that the table or a div wrapping it will only show scrollbars if I give it a fixed width. Andy Baker over 8 years ago
  • Updated my answer. Let me know if this isn't what you're looking for. Ktash over 8 years ago