HTML Table Scroll Function Over X and Y Axis - html

Question

I've created a table that is contained within a section of my webpage and can scroll over the x and y axis to view everything. My problem so far is that the table can scroll along the y-axis when overflowing, but not the x-axis.
In my CSS, I've specified that on the overflow of both, they should both be able to scroll, but only the y-axis works. How would I ensure that the x-axis is scrollable also in order to see the rest of my table?
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

The problem is where you are specifying float property. If you remove it things should work fine.
.tableTasks {
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}