表TD对齐单元格固定在底部吗？

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

您可以在第一行和最后一行之间包含一个空白行，然后为所有表数据设置固定宽度，如果两个表都有3行，这将使两个表看起来更加相似