CODEWITHSUNDEEP
csshtml
garnernw
garnernw

Reputation: 3

Div tags displayed as tables not working how I expected

I'm working on a layout that has multiple tables that I'm trying to put in a much easier to read format than straight down the page. I need different sized cells per row so I'm using the div tag, but I also need the tables within the div tag to be vertically aligned so I'm using the display:table-cell style.

The problem I'm running into is that the first "table row" operates exactly as I'd like it to, but the second table row just smashes everything together to the left. I've made a quick JSFiddle to show what I'm talking about. What am I missing? Or what am I doing wrong?

http://jsfiddle.net/K8AJn/

HTML:

<div class="TR">
    <div class="TD" style="width:40%;">
    Info
    </div>

    <div class="TD" style="width:20%;">
    Some info
    </div>

    <div class="TD" style="width:40%;">
    More info
    </div>
    </div>
    <br />

    <div class="TR">
    <div class="TD" style="width:50%;">
    Info 1
    </div>

    <div class="TD" style="width:50%;">
    Info 2
    </div>
</div>
<br />

CSS:

div.TR {
    background-color:blue;
    display: table-row;
}
div.TD {
    background-color:red;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

Upvotes: 0

Views: 2210

Answers (1)

monners
monners

Reputation: 5302

The problem is that your table rows[sic] and cells don't have a point of reference. Ordinarily they'd rely on the parent table to define their positioning.

To get your TDs to behave as expected, wrap the entire block of TRs in another div, with a class of TABLE and use the following:

.TABLE {
    display: table;
}

HTML:

<div class="TABLE">
    <div class="TR">
        <div class="TD" style="width:40%;height:300px;">Info</div>
        <div class="TD" style="width:20%;height:300px;">Some info</div>
        <div class="TD" style="width:40%;height:300px;">More info</div>
    </div>
    <div class="TR">
        <div class="TD" style="width:50%;height:300px;">Info 1</div>
        <div class="TD" style="width:50%;height:300px;">Info 2</div>
    </div>
</div>

Here's a Fiddle

It should be said, however, that this sort of approach to layout is only really appropriate for fringe cases. There are much cleaner ways of achieving flexible layouts (and inline styles should be avoided like the plague).

Upvotes: 1

Related Questions