Table TR TD align cell fixed at bottom?

Question

I'm trying to get my row/cell that displays "Daily total" to stick to the bottom .. as you can see in my image one is higher than the other because of an extra entry inputted...

i've tried many different valign and vertical-align but cant figure it out.. maybe someone can help me?

here is the html for that tr/td:

echo "<tr><td class=\"daily_total_style\" valign=\"bottom\"><b>Daily Total: " . calcMinutes($dailytotal) . "</b></td></tr>";

Answer 1

much better to use a css rule than attributes

<td class=\"daily_total_style\" style=\"vertical-align: text-bottom\">

EDIT: it's also better to assign this style to a class and assign also this class to your td

---

CATCHED THE ERROR:

You are applying valign to inner td, not container one.

Your td cointainer have to look like this:

<td class="calendar_cell_middle" width="14%" valign="bottom" height="25%">

however, valign it's not more supported in HTML5, so try to include it as css. More, avoid this inner tables, are really hard to manage !

Answer 2

You should use the following for your td in css:

td {
    vertical-align:bottom
}

Also make sure that you don't forget to add the table tags to your code like so:

<table>
    <tr>
        <td class="daily_total_style">
            <b>Daily Total 1</b><br />
            <b>Daily Total 2</b><br />
        </td>
        <td class="daily_total_style">
            <b>Daily Total</b>
        </td>
    </tr>
</table>

You will find a fiddle demo here

Additionally you may want to review what you have added in your daily_total_style css class; something in there might be interfering with your code.

EDITED: I updated your fiddle you just created with the above and it works fine: check it out here

Answer 3

You can include a blank row between the 1st and last row and then set fixed widths for all the table data, It will make both the tables look more similar to each other if they both have 3 rows