CSS 100% width scrollbar (overflow-x) within a table cell

Question

it's my first post. Finally I decided to join you all at stackoverflow!

My problem is about an horizontal scrollbar which has to fit 100% to its container. In the following example you'll find everything you need to understand my problem.

http://jsfiddle.net/cexUr

So the question would be: why the code works fine in first case but when nested within a table cell (second case) then the scrollbar overflows its container? Why this happens and how could it be fixed? One could say: "just get rid of tables", but I need this code working in a big site which has some table layout. Getting rid of tables would represent for me hundred hours of work.

Main difference between first (correct) and second scrollb (incorrect) is:

First scroll (correct)

<div class="hscroll"> (images) </div>

CSS code of the horizontal scroll:

.hscroll {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

Second scroll (incorrect)

<table><tr><td> (same code as first scroll) </td></tr></table>

I'll appreciate your wise suggestions very much.

Gerard.

Kaloyan · Accepted Answer · 2013-04-06 20:34:15Z

9

Add table-layout: fixed; to your .table class.

.table{width:100%;margin-top:50px; table-layout: fixed; }

Here's an example:

http://jsfiddle.net/cexUr/2/

answered Apr 6, 2013 at 20:34

Kaloyan

7,3324 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gerard Over a year ago

Thank you guys! Ironically the issue had to do with "table-layout" hehe :)

Luke Over a year ago

+1 for example, this should be accepted. Should try and use the new SO inline snippets though.

Sebastiaan Luca Over a year ago

Fixed table layout alone did nothing. Also setting a table width fixed it for me 👍

Michael Theriot · Accepted Answer · 2013-04-06 20:35:32Z

8

table { table-layout: fixed; }

Making the table fixed solved it for me.

Edit: seems I'm a few seconds too late!

answered Apr 6, 2013 at 20:35

Michael Theriot

1,0301 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS 100% width scrollbar (overflow-x) within a table cell

First scroll (correct)

Second scroll (incorrect)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

First scroll (correct)

Second scroll (incorrect)

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related