CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
raben
raben

Reputation: 3110

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

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

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.

Upvotes: 5

Views: 30794

Answers (2)

Dhiraj
Dhiraj

Reputation: 1871

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.

Upvotes: 11

shet_tayyy
shet_tayyy

Reputation: 5755

Try max-height and max-width.. It sets the maximum height and width

Upvotes: 0

Related Questions