在 X 和 Y 轴上的 HTML 表格滚动功能

Question

我创建了一个表格，该表格包含在我网页的一部分中，并且可以滚动 x 和 y 轴以查看所有内容。到目前为止，我的问题是表格在溢出时可以沿 y 轴滚动，但不能沿 x 轴滚动。

在我的 CSS 中，我指定在两者溢出时，它们都应该能够滚动，但只有 y 轴有效。我如何确保 x 轴也可滚动以便查看表格的其余部分？

HTML：

<div id="table-wrapper-tasks">
  <div id="table-scroll-tasks">
    <script>
      var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
      var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
      var rowT = null;

      var drawTable = '<table class="tableTasks">';
        for (let i = 0; i < rows; i++) {
          drawTable += '<tr>';
          for(let j = 0; j < cols; j++) {
            drawTable += '<td>Testing</td>';
          }
          drawTable += '</tr>';
        }
        drawTable += '</table>';

        document.write(drawTable);
      </script>
    </div>
  </div>

CSS：

/* Settings for Tasks table */
.tableTasks {
  float:right;
  width:100%;
  margin-top:5px;
  empty-cells: show;
  height:1000px;
  line-height: 35px;
  width: 100px;
}
#table-wrapper-tasks {
  position: relative;
  width:81%;
  float:right;
}

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 520px;
}

Answer 1

问题在于您在哪里指定 float 属性。如果您将其删除，则应该可以正常工作。

.tableTasks {
  width:100%;
  margin-top:5px;
  empty-cells: show;
  height:1000px;
  line-height: 35px;
  width: 100px;
}