Функция прокрутки таблицы HTML по осям X и Y

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