为什么display：table在Firefox和Chrome中表现不同？ [英] Why does display: table behave differently in Firefox and in Chrome?

问题描述

 所有包含table（display：table ）
 __________________ 
 | S | HEADER | 
 |我| --------------- | 
 | d | | 
 | E |内容| 
 | | _______________ | 
 | | FOOTER | 
 -------------------- 
  

SIDE 是表格单元格和标题，内容，页脚包含在另一个 table-cell 中。 CONTENT 是 div ，其中 overflow-y 设置为auto，而在Chrome中，只要 CONTENT 中的内容超过初始高度，滚动条就会出现，整个表格不会垂直调整大小，但是在Firefox中，整个表格我得到了垂直扩展，这不是我预期的行为。

我的表格有 table-layout：fixed 属性和 overflow：hidden 。 是否有阻止在Firefox中垂直扩展的表格？ / p>

 < td> 
< div style =height：200px; 
 overflow：hidden;> 
内容转到这里
< / div> 
< / td> 
  

调整高度，它应该切断额外的线条$ b

I'm making a layout that looks kind of like this

All contained withing a 'table' (display: table)
 __________________
| S| HEADER        |
| I|---------------|
| D|               |
| E| CONTENT       |
|  |_______________|
|  |FOOTER         |
--------------------

SIDE is a table-cell and HEADER, CONTENT, FOOTER are contained within another table-cell. CONTENT is a div that has overflow-y set to auto, and in Chrome, whenever the content in CONTENT exceeds the initial height, the scrollbar appears and the whole table isn't resized vertically, however, in Firefox, the whole table IS getting expanded vertically, which is not the behavior I expected.

My table has the table-layout: fixed property and overflow: hidden. Is there anyway I can prevent the table from expanding vertically in Firefox?

解决方案

mention some height

<td>
<div style="height:200px;
overflow:hidden;">
contents goes here
</div>
</td> 

adjust the height, it should cut off the extra lines out from your sight

这篇关于为什么display：table在Firefox和Chrome中表现不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！