CODEWITHSUNDEEP
htmlcss
Snake Eyes
Snake Eyes

Reputation: 16764

How to fix table layout on overflow: auto

I have the simple table. I want to make ,using simple CSS and my brain, a scrollable tbody.

I know this subject was discussed many times but I didn't see the solution to the other problem.

If tbody is scrollable, the scroll appears on the right of tbody and in this case, deformes my table and cells.

Example -> JsFiddle (I'm avoiding to post huge HTML code and CSS one).

You'll see that the tbody cells is deformed when scrollbar appears.

I have two questions:

  1. Why the table cells is deformed ? Because of table-layout: fixed ?

  2. Why if I put .ov { height: 30%; overflow: auto; } instead of .ov { height: 30px; overflow: auto; }, the scrollbar won't appear and tbody height becomes full.

Thank you.

Upvotes: 2

Views: 2543

Answers (2)

ZombieCode
ZombieCode

Reputation: 1661

Well, I have the same issue with some of the tables I need to work with, but in IE they are a bit more tricky. Going with your same code I added two CSS styles to the jsfiddle and just added a class to one of the HTML elements referencing my new css class. Here is the link: jsfiddle

Here is the code I added (excuse the lame css class name).

thead td { width: 49px; }
.extra { width: 67px; vertical-align: top }

I put the class on the third column of the thead section

<td class="extra">Column 3</td>

I tested this in FireFox (latest version). The only issue is that for the 3rd column the header field is bigger because it includes the width of the scroll bar.

Hope that helps.

Upvotes: 1

Alfred
Alfred

Reputation: 21396

This is quite normal. The scroll is appearing inside your tbody. But scroll bar needs some space for it's buttons to appear and that's why it is pushing your cells. table-layout: fixed has no role here. You may try removing that line from fiddle. Better you try some JavaScript scroll bar solution.

Upvotes: 0

Related Questions