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

我有一个表格行，其中包含3个td s。在中间td有文字，所以它有一定的高度，例如100px的。设置空表格单元格高度100％

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

不幸的是，只有Firefox将左右td s延伸至100％的高度。 Chrome，Safari和IE只是把它放在最低的高度。

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

我与display属性发挥各地，但它并没有帮助。 100％高度不是指父元素，如果是的话，为什么td没有达到父元素的100％高度？

来源

2012-08-31 Horen

为什么要使用全部空第一''为我工作？ – diEcho

请使用必备的CSS和HTML制作小提琴。 – diEcho

@diEcho我知道html看起来很复杂 - 它是，但我已经试图只挑选要点。真正的东西要重得多 – Horen

将 放在空的<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，I只是把一个在那里与论点colspan="3"完全分散在三列。

这里是一个演示：jsbin LINK

需要注意的是，我没有使用border-radius和border CSS像你一样，保持代码尽可能的短，这样你就可以得到的想法。

来源

2012-08-31 10:05:49 aspirinemaga

我试着在小提琴中，但它没有帮助 – Horen

td显示 - 这不是问题。问题在于高度不会调整到100％... – Horen

好的，你的代码不是以最好的方式编写的，例如你的表中有很多空的'td'，你可以使用'colspan '属性将它们全部归为一个'td'。我跟着'html'代码一起更新了我的答案。 – aspirinemaga

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

table { empty-cells: show; }

 这种方式是一种很好的方式，但它有点破解。

来源

2012-08-31 10:18:50

请按照http://www.cs.tut.fi/~jkorpela/HTML/emptycells.html上的指南获取最佳实践。由于表格单元不应该是空的。 –

那里的细胞并非真空，里面有一个'div'和'span'。虽然 – Horen

这个'div'是相对定位的，而'span'是绝对定位的吗？空单元格CSS是否适合您的问题？ –

有作为height: 100%.

一个元素没有这样的事情永远只是路过height: 100%填补其父母的高度，解决方案，以增加 或table {empty-cells: show;}应该做的伎俩，但没有一个特定的高度，你永远不会得到想要的影响。

来源

2012-09-14 10:59:26 Mark

嗯 - 它是如何在Firefox中起作用的呢？ – Horen

FireFox像Chrome，Safari或Opera和Internet Explorer那样处理事情。如果FF做到这一点，不要将它作为参考，其他所有浏览器都不要。就像我所说的那样：没有这样的高度：100％。 – Mark

在将'.ghost.column'设置为'display：inline-block;'时，它如何在Chrome中起作用？ http://jsfiddle.net/X3YAu/10/ – Horen

可以在你的解决方案中使用jQuery吗？如果是这样，你可以把下列函数，并调用它的负荷，并且每当表调整大小（如果它会调整）

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

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

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

来源

2012-09-14 12:33:25 JDandChips

我发现这个答案在another thread和它的工作。这种方式不需要为空白单元格提供额外的空间。

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

来源

2013-05-28 17:22:54 Fiona

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

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

这应该在任何浏览器（Chrome浏览器测试在Windows 7）工作，并为您节省大量的 和分离更好的表现从逻辑。

来源

2014-06-17 13:56:59

你只需要：

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

这就是所有和它

来源

2016-03-28 15:05:34 LagMaster

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

回答

相关问题