Table with fixed height and header and colum width with Bootstrap 3

Question

I would like to have a table with the following features:

• fixed header,
• fixed height (with visible scrollbars)
• 3 fixed width column (one large column and two narrow column).

I started using:

tbody { display:block; overflow:auto; height:100px; }

To get at least the fixed height but this rule squeezes the table on the left (I will provide a screenshot if necessary).

The table is contained in a Bootstrap 3 column.

Here is an example http://jsfiddle.net/PGEdK/

Any ideas? Thanks in advance.

Answer 1

Here's the JS FIDDLE DEMO which is working just like you have expected of. Acutally, there's no problem with your tbody style. You just need to add few more styles for your th and td. So, your final code will be something like this:

tr {display: block; }
th, td { width: 300px; }
tbody { display: block; height: 100px; overflow: auto;} 

If you look at the fiddle, you will notice that I have wrapped th with tr so that I can give proper width to th after giving display:block style to tr. So, if you want to target that tr which wraps th only, you can do that as well.

For demo purpose, I have wrapped the table with .tablecontainer class so that we have certain width to work with.