如何在不缩放内容的情况下使 div 可滚动？

Question

我想要 table 显示为 grid.The table 由 div 持有。如果它扩展了 div 的维度，我希望能够滚动 div 以查看脚本中生成的整个 table.The table 内容。我还定义了一些 css 类.

        var rows = 500;
        var cols = 500;
        PopulateGrid();

        function PopulateGrid() {
          var table = document.getElementById("GridTable");
          for (i = 0; i < rows; i++) {
            var tr = document.createElement('TR');
            for (j = 0; j < cols; j++) {
              var td = document.createElement('TD')
              tr.appendChild(td);
            }
            table.appendChild(tr);
          }
        }

        td {
          border: 1px solid black;
          height: 50px;
          width: 50px;
        }
        table {
          border-spacing: 0px;
        }
        .GridContainer {
          height: 650px;
          width: 1447px;
          overflow: scroll;
        }

<head runat="server">
  <title></title>
</head>

<body>
  <div class="GridContainer">
    <table id="GridTable"></table>
  </div>

</body>

不幸的是，dt 宽度被缩放，而它的高度似乎与 css 中定义的值相对应。我错过了一些 css 属性吗？

Answer 1

TD 元素的宽度有点奇怪，规则可能有点复杂。您认为 table 宽度应该是各个 td 元素的总和，但它是相反的。确定 table 所需的最小大小以及它希望的大小，然后它会尝试确定 TD 宽度的合理值。以下是有效的，如果将 table 宽度设置为 500*50px (25000px) 也有效。

var rows = 500;
var cols = 500;
PopulateGrid();

function PopulateGrid() {
  var table = document.getElementById("GridTable");
  for (i = 0; i < rows; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < cols; j++) {
      var td = document.createElement('TD')
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
}

td {
  border: 1px solid black;
  height: 50px;
  width: 50px;
  min-width: 50px;
}
table {
  border-spacing: 0px;
}
.GridContainer {
  height: 650px;
  width: 1447px;
  overflow: scroll;
}

<head runat="server">
  <title></title>
</head>

<body>
  <div class="GridContainer">
    <table id="GridTable"></table>
  </div>

</body>

如何在不缩放内容的情况下使 div 可滚动？

How to make a div scrollable without scaling its contents?

html

javascript

css

html-table