Question

我想要一个显示为网格的表。该表由div保存。如果它扩展了div的维度，我希望能够滚动div以便查看整个表格。表格内容在脚本中生成。我还定义了一些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元素的宽度有点奇怪，规则可能有点复杂。您认为表格宽度应该是各个td元素的总和，但它的工作方式相反。确定表的最小所需大小以及它希望的大小，然后它尝试确定TD的宽度的合理值。以下工作，如果您将表格宽度设置为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可滚动？

1 个答案: