Question

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

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

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

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

我玩过display财产，但没有帮助。不是100％的高度是指父元素，如果是，为什么td不能指向父元素的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>放在那里，而不是使用空的colspan="3"，而是将一个td完全分散在三列上。

以下是演示：jsbin LINK

请注意，我没有像你一样使用border-radius和border css来维护代码尽可能短，所以你可以理解。

Answer 2

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

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

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

Answer 3

没有height: 100%.

这样的东西

一个元素只能通过传递height: 100%来填充其父级高度，添加 或table {empty-cells: show;}的解决方案应该可以做到这一点，但是没有特定的高度你永远不会得到所需的效果。

Answer 4

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

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

我也想知道使用表格是否是达到目标的最佳方法？这是否有原因，或者是否可以尝试使用<div>元素？

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

Answer 5

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

table { empty-cells: show; }

 方式是一种很好的方式，但它有点像黑客。

Answer 6

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

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

Answer 7

你只需要：

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

多数，这对我有用

Answer 8

保持空单元格高度100%

对于 month year type sale 0 1 2012 C 55 2 7 2013 S 84 3 10 2014 C 31 和 <th> ：

<td>

仅适用于th:empty::before,td:empty::before{content:'\00a0';visibility:hidden}：

<td>

说明：

td:empty::before{content:'\00a0';visibility:hidden} 是单个空格的代码

'\00a0' 隐藏单个空格

设置空表格单元格高度100％

8 个答案: