防止單元格擴展表格高度

我正在嘗試使圖像佔用表格的所有剩餘寬度，並且跨越表格的整個高度，而無需進一步擴展，具有溢出：如果不存在自動滾動足夠的高度。防止單元格擴展表格高度

寬度位很容易，但無論我做什麼，包含圖像的表格單元格都會擴展表格的高度。有沒有辦法來防止這種情況，而不是明確設置圖像的高度？

2012-04-05 Cory Nelson

您將不得不圍繞內容使用包裝元素來限制高度。

<table> 
    <tr> 
     <td><div class="overflow">This is short.</div></td>   
     <td><div class="overflow">This is longer.</div></td> 
     <td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>   
    </tr> 
</table> 

.overflow { 
    max-height:40px; 
    overflow:hidden; 
} 

var tableHeight = $('table').height(); 
$('.overflow').css('height',tableHeight + 'px');

來源

2012-04-05 15:52:45

顯式設置高度正是我想要避免的。我試圖讓圖像的高度等於表格高度（考慮其他行），而不再擴展它。 – 2012-04-05 15:55:32

你可以根據需要設置高度。我將添加JS以顯示如何從桌面上拉出它。你需要一個明確的高度才能使溢出工作。 – 2012-04-05 15:57:52

總是可以給圖像一個百分比例如height =「100％」，這應該使它成爲它所在單元格的完整大小，但會限制溢出。

來源

2012-04-05 16:02:15 Andrew

到目前爲止，我發現的解決方案在瀏覽器上有所不同，因此並不理想。您可以基於客戶端呈現不同的標記。（但仍然在尋找一個更普遍的答案。）

爲最普遍的解決方案至今再次更新：

<style> 
    div.ImageBlock 
    { 
     height:100%; 
     width:100%; 
     left:0px; 
     top:0px; 
     overflow:auto; 
    } 
    div.IE_CompatMode 
    { 
     position:absolute; 
    } 
</style>

無論是工作在Chrome和IE_CompatMode具有當IE瀏覽器兼容模式在添加。

<td rowspan="2" style="position:relative;"> 
    <div class="ImageBlock [conditional:]IE_CompatMode"> 
     <img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" /> 
    </div> 
</td>

並沒有什麼（即我還沒有試過）在Firefox。

來源

2012-04-05 16:11:04

不適合我。 – 2012-04-05 20:21:42

@CoryNelson，那意味着...？圖像仍在擴大表格？ – 2012-04-05 20:24:50

防止單元格擴展表格高度

回答

相關問題