CODEWITHSUNDEEP
htmlcsscss-tables
Kees C. Bakker
Kees C. Bakker

Reputation: 33391

Auto grow table-cell element by content

I'm trying to make a table with the display:table-cell and display:table css properties. It looks like this:

Table example

My problem is that the orange table cell needs to be just as big as its inner content. Sometimes the green boxes are 100px and sometimes they are 200px. The .left should auto-grow. I would like a CSS solution for this problem. Is that possible?

It should look like this:

Should be like this

Here's the JSFiddle. And here's the code:

Html:

<div class="wrapper">
    <div class="left">
        <div class="tree">A
            <br/>- B
            <br/>- C
            <br/>
        </div>
        <div class="filter">F
            <br/>F2
            <br/>
        </div>
    </div>
    <div class="content">A A A
        <br/>B B B
        <br/>C C C
        <br/>
    </div>
    <div class="right">S
        <br/>S2
        <br/>
    </div>
</div>

CSS:

div {
    margin:2px;
    padding:2px;
}
.wrapper {
    width:700px;
    border:solid 1px red;
    display:table;
    table-layout:fixed;
}
.right {
    display:table-cell;
    border:solid 1px blue;
    width:100px;
}
.left {
    display:table-cell;
    border:dashed 1px orange;
}
.content {
    display:table-cell;
}
.tree, .filter {
    display:block;
    width:100px;
    border:solid 1px green;
}

The .left doesn't play nice :(

Upvotes: 2

Views: 2996

Answers (2)

Tate Reynolds
Tate Reynolds

Reputation: 113

You can change the div containing the left class in your HTML to a span

<span class="left">
    <!-- no content, should not be displayed !-->
</span>

Then change your CSS changing your display from table-cell to inline-block

.left {
display:inline-block;
border:dashed 1px orange;
}

You could also try this... FIDDLE Again

Upvotes: 0

Danield
Danield

Reputation: 125503

Edit2

Place width: 100px on your left class and remove table-layout:fixed; from wrapper class

FIDDLE

EDIT

In your markup remove whitespaces in .left class when it is empty like so:

<div class="left"></div> or also like:

<div class="left"><!-- some comment is also ok--></div>

This is necessary because otherwise the :empty selector won't consider this element empty.

In css add this:

.left:empty
{
    display:none;
}

new FIDDLE

How about wrapping the content of your .left class within another div - like so:

<div class="left">
   <div class="inner"></div>
</div>

Then, if you like, you could remove the border if .inner has no content - like so:

.inner:empty
{
    border:none;
}

FIDDLE

Upvotes: 1

Related Questions