將最大高度設置為動態表不起作用？

Question

我有一個表，該表是使用javascript動態生成的，並根據數組的內容使用jQuery附加了行。

我的問題是我想使用css max-height屬性為表格分配最大高度，以便在達到一定高度后可以滾動表格。

這是必需的，因為該表可能包含大量行，然后它將變得太大。

我為表分配了display: block和200px的css max-height屬性，但是該屬性似乎被忽略了。 桌子的高度仍然超出了所設置的最大高度。 我有什么想念的嗎？

這是我的代碼的精簡版本，顯示了我想要做什么。 我嘗試將表格放置在像kuba建議的div中，但仍然無法正常工作。

 $(document).ready(function() { $("#mylink").click(function() { var jsvCustomIcons = [ "images/img1.png","images/img2.png","images/img3.png","images/img4.png","images/img5.png","images/img6.png" ]; var mydiv = document.createElement("div"); $(mydiv).attr("id","mydiv"); var iconSettingsTable = document.createElement("table"); $(iconSettingsTable).attr("id","iconSettingsTable"); var tempTR,tempDescTH,tempDelTH; var tempDescTD,tempDelTD,tempImg,tempImg2,tempBold; tempTR = document.createElement("tr"); $(tempTR).addClass("selectorRowHeader"); tempDescTH = document.createElement("th"); $(tempDescTH).addClass("selectorColHeader"); $(tempDescTH).html("Description"); tempDelTH = document.createElement("th"); $(tempDelTH).addClass("selectorColHeader"); $(tempDelTH).html("Delete"); $(tempTR).append(tempDescTH); $(tempTR).append(tempDelTH); $(tempTR).css("background-color","#d3d3d3"); $(iconSettingsTable).append(tempTR); for(i=0;i<jsvCustomIcons.length;i++) { tempTR = document.createElement("tr"); $(tempTR).addClass("selectorRowData"); tempDescTD = document.createElement("td"); $(tempDescTD).addClass("selectorColData"); tempBold = document.createElement("b"); $(tempBold).html(jsvCustomIcons[i]); $(tempBold).addClass("iconDescriptionTexts"); tempImg2 = document.createElement("img"); $(tempImg2).attr(jsvCustomIcons[i]); $(tempImg2).addClass("iconDescriptionImages"); $(tempDescTD).append(tempBold); $(tempDescTD).append(tempImg2); tempDelTD = document.createElement("td"); $(tempDelTD).addClass("selectorColData"); tempImg = document.createElement("img"); $(tempImg).attr("id","delImage" + i); $(tempImg).attr("src","images/delete.png"); $(tempImg).css("margin-top","5px"); $(tempImg).click(function() { // Code to handle clicks }); $(tempDelTD).append(tempImg); $(tempTR).append(tempDescTD); $(tempTR).append(tempDelTD); $(iconSettingsTable).append(tempTR); } $(iconSettingsTable).css({"position":"absolute","top":$("#iconSettingsSpan").position().top + 20,"left":0}); $(mydiv).append(iconSettingsTable); $("body").append(mydiv); }); }); 

 #mydiv { max-height: 200px; overflow-y: scroll; } #iconSettingsTable { border: 2px solid black; } .selectorColData { text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id='iconSettingsSpan'> <a class='link' style='cursor:pointer;' id='mylink' >Click for Icon Table</a> </span> 

Answer 1

JavaScript的第62行更改為position：auto https://jsfiddle.net/tonytansley/dmu5wrd0/

$(iconSettingsTable).css({"position":"auto","top":$("#iconSettingsSpan").position().top + 20,"left":0});

Answer 2

這是因為該表的“位置：絕對”屬性

從jquery代碼中刪除該行（第62行）

或使用這個

#iconSettingsTable
{
    border: 2px solid black;
    position : static !important;
}

或使用這個

#mydiv
{
   max-height:100px;
   overflow-y:scroll;
   position : relative;
}

Answer 3

作為更新，似乎如果將div的位置設置為絕對位置，它會起作用。 我的問題是我將桌子的位置設置為絕對位置。 這是更新的jsfiddle：

Link: http://jsfiddle.net/e6gayjps/5/

Answer 4

首先，需要注意的是直接將max-height設置到表是不可靠的：

在CSS 2.1中，'min-height'和'max-height'對表，內聯表，表單元格，表行和行組的影響是不確定的。

因此，就像您已經做過的那樣，解決方案將其設置為非表格父級。

但是您的方法存在一個問題：您的表的position: absolute ，因此將其從流中刪除，因此父div的高度為0 。 即使您為其設置了明確的高度，也會發生overflow: scroll將不起作用，因為

['overflow']影響元素的所有內容的裁剪，但其包含塊是元素的視口或祖先的任何后代元素（及其各自的內容和后代）除外。

在您的情況下，由於表已定位，因此它的包含塊不是父div ：

如果元素具有“位置：絕對”，則包含塊由最接近的祖先以“絕對”，“相對”或“固定”的“位置”建立

因此，要使其正常工作，您需要刪除表的position: absolute ，或為父div設置一個不同於static的position 。