When I render my table with the JQuery command, if the table is less wide than my screen, the headers appear left aligned, while the table is centered. Below is most of the html file (it is a thymeleaf template)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!--JQuery install-->
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!-- <link href="/css/navbar.css" rel="stylesheet">-->
<!--Data tables doc: https://datatables.net/manual/index -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).on('click', function(event) {
...
$("#main").DataTable({
scrollY: 400,
scrollX: 400,
"ordering": false,
paging: false
});
});
}
});
</script>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div id="resultWrapper">
<span id="resultTable">
<th:block th:if="${table} != null and ${tableHead} != null">
<table id="main" class="display cell-border">
<thead>
<tr>
<th:block th:each="columnHeader: ${tableHead}">
<td th:text="${columnHeader}"></td>
</th:block>
</tr>
</thead>
<tbody>
<th:block th:each="row : ${table}">
<tr>
<th:block th:each="column : ${row}">
<td th:text="${column}"></td>
</th:block>
</tr>
</th:block>
</tbody>
</table>
<div class="complete">
</div>
</th:block>
</span>
</div>
</body>
</html>
This renders fine if I change the initializer to not have the scrollX value, but I do want it to fit on the screen.