Set empty table cell height 100%

Question

I have a table row that contains 3 tds. In the middle td there is text, so it has a certain height, e.g. 100px.

The two tds on the left and the right contain a table each that display a (later) clickable area which is supposed to have the same height as the middle td - so 100px in my example.

Unfortunately, only Firefox stretches the left and right tds to 100% height. Chrome, Safari and IE just put it on minium height.

Here's the fiddle: http://jsfiddle.net/X3YAu/

I've played around with the display property but it didn't help. Doesn't the 100% height refer to the parent element and if so why don't the tds strech to the 100% height of the parent element?

Answer 1

Putting the   in your empty <td></td> should help.

---

Added info:

I rewrote entirely your code because you have a lot of useless tags there, this should work:

<table align="center" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png" width="16" height="16" title="Up" alt="Arrow up" style="display:inline-block;" />
        </td>
    </tr>
    <tr>
        <td align="center" width="22" height="100">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_left.png" width="16" height="16" title="Left" alt="Arrow left" style="display:inline-block;padding:3px;background:#A9DBF5;" />
        </td>
        <td align="left" height="100" bgcolor="#FFFFFF">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </td>
        <td align="center" width="22" height="100">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_right.png" width="16" height="16" title="Right" alt="Arrow right" style="display:inline-block;padding:3px;background:#A9DBF5;" />
        </td>
    </tr>
    <tr>
        <td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5">
            <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_down.png" width="16" height="16" title="Down" alt="Arrow down" style="display:inline-block;" />
        </td>
    </tr>
</table>

As you see, instead of using empty <td>s , i just put one there with argument colspan="3" spread one td entirely on three columns.

Here is a demo: jsbin LINK

Note that, i didn't used border-radius and border css as you did, to maintain the code as short as possible, so you can get the idea.