Встроенный файл CSV находится ниже нижнего колонтитула HTML

Question

Файл CSV создал таблицу, которая находится под тегом нижнего колонтитула, при просмотре я увидел, что весь тег был ниже тега нижнего колонтитула (в MS EDGE), где я хочу быть выше тега нижнего колонтитула Это HTML Код со стилем

<style>
        table {
            border-collapse: collapse;
            border: 2px black solid;
            font: 13px sans-serif;
            width: 50%;  
            margin-left: auto;
            margin-right:auto;
            color: #101080; 
                                      
        }
                  
div1 { 
    text-align:center;
    }
    tr:nth-child(even) {background-color: #f2f2f2;}
    </style>
</head>

Это сценарий, который запускает файл CSV и связанную таблицу

<div1>

<p align="center"><button type="button"  onclick="mytable(); onclick=this.style.display='none'";>RUN_CSV_IMPORT_SCRIPT</button></p>

<script src="d3.v3.min.js"></script> 

<script type="text/javascript"charset="utf-8"> 

function mytable() {
    

        d3.text("data.csv", function(data) {
            var parsedCSV = d3.csv.parseRows(data);
            var container = d3.select("body")
                .append("table")
                .selectAll("tr")
                    .data(parsedCSV).enter()
                   .append("tr")
                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .text(function(d) { return d; });
 });
}
    </script>


</div1>

</body>
</html>

И проблему нижнего колонтитула

<div class="footer">
Copyright 2020 - All Rights Reserved
</div>

И это связанный нижний колонтитул CSS

.footer
{
bottom: 0px;
Text-align: right; 
border-style: solid;
border-width: 1px;
background-color: #9bc716;
margin-left: 7.5%;
margin-right: 7.5%;
}