CODEWITHSUNDEEP
htmlcsshtml-table
MrUpsidown
MrUpsidown

Reputation: 22491

Table vertical alignment webkit issue

Given the following example: http://jsfiddle.net/upsidown/z4m7r/

HTML:

<table class="main-table" cellspacing="20">
    <tr>
        <td style="height:100%;"><table class="sub-table"><tr><td>Some text</td></tr><tr><td class="bottom-align">Some bottom aligned element</td></tr></table></td>
        <td>Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. </td>
        <td>Some other text</td>
    </tr>
</table>

CSS:

.main-table {

    width:300px; 
    vertical-align: top;
}

.main-table td {

    vertical-align: top; 
}

.sub-table {

    height:100%;
}

td {

    border:2px solid black;
}

td.bottom-align {

    vertical-align: bottom;
    background:yellow;
}

The yellow cell text should be vertically aligned at the bottom. This works on Firefox but not on Safari / Chrome (webkit) browsers.

Any idea how I can achieve that? Thanks in advance.

Upvotes: 1

Views: 330

Answers (3)

otinanai
otinanai

Reputation: 4023

A simple solution is to fill the space with padding:

td.bottom-align {
    padding-top:100%;
    vertical-align: bottom;
    background:yellow;
}

Here's the demo: http://jsfiddle.net/z4m7r/11/

--EDIT--

Set the parent table at 100% height and it should do the trick. Demo: http://jsfiddle.net/z4m7r/9/

Upvotes: 1

RoToRa
RoToRa

Reputation: 38431

First off: Why are you using tables and nested tables at that? Is this really for tabluar data?

To your problem: Webkit most likely abides strictly by the CSS rules for height, which says, that height in per cent only applies if the containing block has an explicit height.

That means that you need to give the main-table a height (the height of a cell/row is explicitly calculated from the height of the table and the other cells/rows in the table). And if that is in turn in per cent, then also the next parent (here body), and so forth.

So either something like

.main-table { height: 500px; }

or 

html, body, .main-table { height: 100%; }

will help.

(BTW, the height: 100% on the cell makes no sense.)

Upvotes: 1

Sahil Grover
Sahil Grover

Reputation: 219

I've updated your jsfiddle: http://jsfiddle.net/z4m7r/6/

To start with, I wouldn't use a table inside of another table as it will make the markup a nightmare to read and maintain. It's also difficult to put one row at the bottom of the table and the other at the bottom. Instead I just put two divs inside the cell:

<td class="firstcell" style="height:200px;">
    <div>Some text</div>
    <div class="bottom">Some bottom aligned text</div>
</td>

Next, I set the position of the parent cell to relative, and made the bottom div absolute:

.firstcell {
    position: relative;
    width: 100px;
}

.firstcell > div {
    border: solid thin black;
}

.bottom {
    position: absolute;
    bottom: 0;
    background: yellow;
}

Upvotes: -1

Related Questions