设置空表单元格高度 100%

Question

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

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

不幸的是，只有 Firefox 将左右 tds 拉伸到 100% 高度。 Chrome、Safari 和 IE 只需将其置于最小高度。

这是小提琴：http://jsfiddle.net/X3YAu/

我玩过display 属性，但没有帮助。 100% 高度不是指父元素吗？如果是，为什么tds 不延伸到父元素的 100% 高度？

Answer 1

保持空白单元格高度为 100%

对于<th> 和<td>：

th:empty::before,td:empty::before{content:'\00a0';visibility:hidden}

仅限<td>：

td:empty::before{content:'\00a0';visibility:hidden}

说明：

'\00a0' 是单个空格的代码

visibility:hidden 隐藏那个空格

Answer 2

你只需要：

table { empty-cells: show; 
min-width: 130px; //example.
}

就是这样，它对我有用

Answer 3

另一个技巧是使用:after 伪元素：

td.empty:after {
  content: 'Empty cell';
  visibility: hidden;
  speak: none;
}

这应该适用于任何浏览器（在 Windows 7 上的 Chrome 中测试），并为您节省大量   并将更好的演示与逻辑分开。

Answer 4

我在another thread 中找到了这个答案，它奏效了。这种方式不需要为空白单元格放置额外的空间。

td a {
  display: inline-block;
  height:100%;
  width:100%;
}

Answer 5

将  放入空的<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，以保持代码尽可能短，以便您了解。

Answer 6

可以在您的解决方案中使用 jQuery 吗？如果是这样，您可以将以下内容放入一个函数中并在加载时调用它，并且每当表调整大小时（如果它调整大小）

$('.ghost.column table').height($('.ghost.column').height())

我还想知道使用表格是否是实现您目标的最佳方法？这是有原因的，还是可以尝试使用<div> 元素代替？

工作演示： http://jsfiddle.net/X3YAu/14/

Answer 7

没有height: 100%.这样的东西

一个元素永远无法通过传递height: 100% 来填充其父级高度，添加  或table {empty-cells: show;} 的解决方案应该可以解决问题，但如果没有特定的高度，您将永远无法获得所需的效果。

Answer 8

最好的方法是使用 CSS 方式。

table { empty-cells: show; }

  方法是一个好方法，但它有点小技巧。