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

Posted 2023-03-06

【中文标题】在 X 和 Y 轴上的 HTML 表格滚动功能

【英文标题】：HTML Table Scroll Function Over X and Y Axis

【发布时间】：2018-10-20 23:20:08

【问题描述】：

我创建了一个表格，该表格包含在我网页的一部分中，并且可以滚动 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;

【参考方案1】：

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

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

【讨论】：

谢谢！工作得很好，我还在努力学习 HTML，所以我很抱歉这个愚蠢的问题。

不是问题:)