Question

我有一个使用javascript动态生成的表，并根据数组的内容使用jQuery附加了行。

我的问题是我想使用css max-height属性为表分配最大高度，以便在达到某个高度后，可以滚动表格。

这是必需的，因为该表可能包含大量行，然后它会变得太大。

我为表格分配了display: block和max-height的{{1}}属性，但该属性似乎被忽略了。桌子的高度仍然超出最大高度设置。有什么我想念的吗？

这是我的代码的精简版本，显示了我想要做的事情。我尝试将表放在像库巴建议的div中，但它仍然不起作用。

200px

$(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;
}

Answer 1

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

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

Answer 2

因为＆＃34;位置：绝对＆＃34;该表的财产

从jquery代码中删除它（第62行）

或使用此

pngcheck.exe a.png
OK: a.png (1024x1024, 32-bit RGB+alpha, non-interlaced, 80.7%).

pngcheck.exe b.png
OK: b.png (1024x1024, 8-bit palette+trns, non-interlaced, 83.1%).

或使用此

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

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']会影响所有元素内容的剪辑除了任何后代元素（及其各自的内容和后代）其包含块是视口或其祖先元素。

在您的情况下，由于表格已定位，其containing block不是父div：

如果元素具有'position：absolute'，则包含块为由最近的祖先建立，具有'绝对'的'位置'， '亲戚'或'固定'

因此，为了使其有效，您需要删除表格的position: absolute，或将position设置为与static不同的div。

将Max-Height设置为动态表不起作用？

4 个答案: