Question

I’m using twitter’s bootstrap (I’m new to it) and have a menu and a table on the page. The menu by itself is fine. The table with no data (or just a few rows in it) is just fine. The problem is when I try to put a lot of rows in my table so that the vertical scroll bar appears, it messes up the formatting and the scrollbar bleeds into the header. Here is my fiddle. What am I doing wrong?

EDIT:
This is what I’m currently getting:

______________________
|_______header_____|*| <----the scrollbar bleeds into the header
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

Here’s what I want:

______________________
|_______header_______|
|                  |*|<--- scrollbar starts after the header
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

This fiddle resolves the problem, but I can’t seem to achieve the same with twitter bootstrap…the scrollbar still bleeds into the header. thx!

Answer 1

The scrollbar, I believe, has nothing to do with the table. It comes from the width bootstrap sets on the .container div.

Take a look and see if you can still see the scroll-bar: http://jsfiddle.net/joplomacedo/Ph7GZ/3/