css - 设置空表格单元格高度 100%

Question

我有一个包含 3 个 td 的表格行。 td 中间是文字，所以有一定的高度，例如100 像素。

左右两个 td 包含一个表格，每个表格显示一个(稍后的)可点击区域，该区域应该与中间的 td 具有相同的高度> - 在我的示例中为 100px。

不幸的是，只有 Firefox 将左右 td 拉伸(stretch)到 100% 高度。 Chrome、Safari 和 IE 只是将其设置为最小高度。

这是 fiddle :http://jsfiddle.net/X3YAu/

我试过 display 属性，但没有用。 100% 高度不是指父元素吗？如果是，为什么 td 不拉伸(stretch)到父元素的 100% 高度？

Answer 1

将  在你的空<td></td>应该有帮助。

---

添加信息:

我完全重写了你的代码，因为你那里有很多无用的标签，这应该可以工作:

<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>

如您所见，而不是使用空的 <td> s ，我只是把一个参数放在那里 colspan="3"将一个 td 完全分布在三列上。

这是一个演示:jsbin LINK

请注意，我没有使用 border-radius和 border像你一样使用 css，保持代码尽可能短，这样你就可以理解了。