CODEWITHSUNDEEP
htmlcsswidthcss-tables
Loolooii
Loolooii

Reputation: 9200

How to set div width to the width of the table in it?

I have a div, which contains a table. Everything is working as I want, except I don't know how to set the width of the div so that it grows as the width of the table inside it grows. How Can I do that? Thanks.

This is the CSS code of the div: 

#events-table-wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    margin-top: 100px;
    border: 1px solid #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

Setting width to auto didn't help. Btw, I didn't change anything in the table in CSS.

Edit: Here is a live version: http://jsfiddle.net/ZDF2U/

Upvotes: 3

Views: 14247

Answers (4)

Ste Prescott
Ste Prescott

Reputation: 1817

You could also change the divs properties to be

float:left;
width:auto;

Upvotes: 0

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102448

In your case you can also do in the div:

display: table;

Here's the jsFiddle: http://jsfiddle.net/leniel/Et3t5/

Here's another jsFiddle that shows you a similar case: http://jsfiddle.net/leniel/T7DTc/

If the div's width: auto; then it expands to accommodate the textarea inside the table. If you set it to width: 500px; then the textarea grows outside the div.

So the solution looks like setting width: auto;. Of course something special in your code may be interfering.

Upvotes: 7

ranieuwe
ranieuwe

Reputation: 2296

Make the div containing the table inline-block. I.e. display: inline-block. This will force it to render inline while being block. Alternatively display: table will work too.

Link to a jsFiddle: http://jsfiddle.net/Mr9jQ/

Upvotes: 1

Loolooii
Loolooii

Reputation: 9200

Setting table { width:100% } solved it. Now I can keep the div big enough and the table just fits in it. Thanks.

Upvotes: 2

Related Questions