Headers not aligned in Datatable
Headers not aligned in Datatable
jfarnsworth
Posts: 3Questions: 1Answers: 0
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.
This question has an accepted answers - jump to answer
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
http://live.datatables.net/zubenake/1/edit?html,js,output
This is a link to the page where the error is replicated. Just stretch out the output panel, and you can see my described error
Here it is working: http://live.datatables.net/zubenake/3/edit
scrollXis a boolean, not a number, and you need to addstyle="width:100%"to the table to ensure it uses the whole area.Colin
Works like a charm, thank you
Coln's answer worked for me. Thanks. The documentation about the scrollX option was not clear about that.
Ah, @mikefinch , good spot, thanks. I've corrected the explanation in that example to say it's a boolean. It'll appear when the website it next rebuilt.
Colin
The documentation (https://datatables.net/reference/option/scrollX) still says scrollX can also be a number:
"This property can be true which will allow the table to scroll horizontally when needed (recommended), or any CSS unit, or a number (in which case it will be treated as a pixel measurement)."
Many thanks for flagging that! I've removed that block now and we'll get the site updated with the change soon.
Regards,
Allan