CSS 设置空表格单元格高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12213159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set empty table cell height 100%
提问by Horen
I have a table row that contains 3 tds. In the middle tdthere is text, so it has a certain height, e.g. 100px.
我有一个包含 3td秒的表格行。中间td有文字，所以它有一定的高度，例如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.
td左侧和右侧的两个s 包含一个表格，每个表格显示一个（稍后的）可点击区域，该区域应该与中间具有相同的高度td- 在我的示例中为 100px。
Unfortunately, only Firefox stretches the left and right tds to 100% height. Chrome, Safari and IE just put it on minium height.
不幸的是，只有 Firefox 将左右tds拉伸到 100% 高度。Chrome、Safari 和 IE 只是把它放在最小高度上。
Here's the fiddle: http://jsfiddle.net/X3YAu/
这是小提琴：http: //jsfiddle.net/X3YAu/
I've played around with the displayproperty 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?
我玩过这处display房产，但没有帮助。100% 高度不是指父元素，如果是，为什么tds 不拉伸到父元素的 100% 高度？
回答by aspirinemaga
Putting the in your empty <td></td>should help.
将 放入空的<td></td>应该会有所帮助。
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.
如您所见，我没有使用空的<td>s ，而是将一个参数放在那里，参数colspan="3"将一个 td 完全分布在三列上。
Here is a demo: jsbin LINK
这是一个演示：jsbin LINK
Note that, i didn't used border-radiusand bordercss as you did, to maintain the code as short as possible, so you can get the idea.
请注意，我没有像您那样使用border-radius和bordercss，以保持代码尽可能短，以便您了解这个想法。
回答by Gianluca Mancini
Another trick is to use the :afterpseudo-element:
另一个技巧是使用:after伪元素：
td.empty:after {
content: 'Empty cell';
visibility: hidden;
speak: none;
}
This should work in any browser (tested in Chrome on Windows 7) and saves you a lot of and separates better presentation from logic.
这应该适用于任何浏览器（在 Windows 7 上的 Chrome 中测试），并为您节省很多 并将更好的演示与逻辑分开。
回答by Mark
there is no such thing as height: 100%.
没有这样的事情 height: 100%.
A element can never fill its parents height just by passing height: 100%, the solutions to add or table {empty-cells: show;}should do the trick, but without a specific height you never get the desired effect.
元素永远不能仅通过传递来填充其父高度height: 100%，添加 或table {empty-cells: show;}应该解决的问题，但没有特定的高度，您永远无法获得所需的效果。
回答by JDandChips
Is it ok to use jQuery in your solution? If so, you could put the following into a function and call it on load, and whenever the table resizes (if it resizes)
可以在您的解决方案中使用 jQuery 吗？如果是这样，您可以将以下内容放入一个函数中并在加载时调用它，并且每当表调整大小时（如果它调整大小）
$('.ghost.column table').height($('.ghost.column').height())
I also wonder if using tables is the best approach for your goal? Is there a reason for this, or could it be possible to try using <div>elements instead?
我还想知道使用表格是否是实现您目标的最佳方法？是否有原因，或者是否可以尝试使用<div>元素？
Working Demo: http://jsfiddle.net/X3YAu/14/
工作演示：http: //jsfiddle.net/X3YAu/14/
回答by Fiona
I found this answer in another threadand it worked. There's no need to put extra spaces for blank cells this way.
我在另一个线程中找到了这个答案并且它起作用了。没有必要以这种方式为空白单元格放置额外的空间。
td a {
display: inline-block;
height:100%;
width:100%;
}
回答by Ryan McDonough
The best way would be to use the CSS way.
最好的方法是使用 CSS 方式。
table { empty-cells: show; }
The way is a good way but it's a bit of a hack.
该 方法是一个很好的方式，但它是一个黑客攻击的一位。
回答by Andres Paladines
You just need:
您只需要：
table { empty-cells: show;
min-width: 130px; //example.
}
Thats all and it worked for me
这就是全部，它对我有用
