13

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

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

不幸的是，只有 Firefox 将左右tds 拉伸到 100% 高度。Chrome、Safari 和 IE 只是把它放在最小高度。

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

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

4

8 回答 8

16

把它&nbsp;放在你的空<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和bordercss 来保持代码尽可能短，因此您可以理解。

于 2012-08-31T10:05:49.867 回答
9

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

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

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

于 2014-06-17T13:56:59.950 回答
6

没有这样的事情height: 100%.

一个元素永远不能仅仅通过传递来填充它的父级高度height: 100%，添加的解决方案&nbsp;或者table {empty-cells: show;}应该做的伎俩，但是没有一个特定的高度你永远不会得到想要的效果。

于 2012-09-14T10:59:26.960 回答
2

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

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

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

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

于 2012-09-14T12:33:25.297 回答
1

我在另一个线程中找到了这个答案并且它有效。这种方式不需要为空白单元格放置额外的空格。

td a {
  display: inline-block;
  height:100%;
  width:100%;
}
于 2013-05-28T17:22:54.783 回答
1

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

table { empty-cells: show; }

方法是一个好方法，&nbsp;但它有点黑客。

于 2012-08-31T10:18:50.387 回答
0

您只需要：

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

就是这样，它对我有用

于 2016-03-28T15:05:34.933 回答
0

保持空单元格高度 100%

对于<th>和<td>：

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

仅适用<td>于：

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

描述：

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

visibility:hidden隐藏那个单一的空间

于 2021-03-02T16:38:07.247 回答