How to display correctly my DataTables table? - css

Question

I have created a Datatables table using AJAX, but when I try to render it, the <tr> inside the <tbody>, are shorter than those in the <thead>.
There are 2 pages: the first one is the form and the header of the table, hidden by default. When the user clicks on the search button, it displays the header and loads the table body via AJAX. The result is the following:
style.css
.outcomeResearchTable {
z-index: 100;
background-color: white;
display: none;
}
.outcomeResearchTable th {
/*padding:1.0rem; */
width: 100px !important;
/* border-bottom:1px solid lightgray; */
background-color: #FFFFFF;
}
.outcomeResearchTable th:first-of-type {
padding: 1rem;
width: 80px !important;
}
.outcomeResearchTable th:last-of-type {
padding: 1rem;
width: 80px !important;
}
#OUTCOME_RESEARCH_TABLE thead {
display: none;
}
.outcomeResearchTable td {
padding: 1rem;
width: 100px;
}
.outcomeResearchTable td:first-of-type {
padding: 1rem;
width: 80px !important;
}
.outcomeResearchTable td:last-of-type {
padding: 1rem;
width: 80px !important;
}
page1.php
<td colspan="2">
<button class="btn btn-primary" onclick="assetSearch();" tabindex="4">Ricerca</button>
<?php
echo "<table id=\"OUTCOME_RESEARCH_TABLE\" class=\"display outcomeResearchTable\" cellspacing=\"0\" width=\"100%\">\n";
echo "<thead>\n";
echo "<tr>\n";
echo "<th>IDConfig</th>\n";
echo "<th>Nome</th>\n";
echo "<th>Tipo</th>\n";
echo "<th>Stato</th>\n";
echo "<th>Ambiente</th>\n";
echo "<th>Aggregatore</th>\n";
echo "<th>Locazione</th>\n";
echo "<th>Modello</th>\n";
echo "<th>Contratto</th>\n";
echo "<th>Valida Dal</th>\n";
echo "<th>Valida Al</th>\n";
echo "<th>Dettagli</th>\n";
echo "</tr>\n";
echo "</thead>\n";
echo "</table><br />\n";
?>
</td>
assePageScript.js
function assetSearch() {
var validation = checkForSelectedFields();
if (validation == "KO") {
return;
}
var arrForm = [];
arrForm.push(document.getElementById("name").value); // 0
//arrForm.push(document.getElementById("idConfig").value);
arrForm.push(document.getElementById("serialNumber").value); // 1
arrForm.push(document.getElementById("tipo").value); // 2
arrForm.push(document.getElementById("ambiente").value); // 3
arrForm.push(document.getElementById("modello").value); // 4
arrForm.push(document.getElementById("locazione").value); // 5
arrForm.push(document.getElementById("vendor").value); // 6
arrForm.push(document.getElementById("gruppo").value); // 7
arrForm.push(document.getElementById("stato").value); // 8
arrForm.push(document.getElementById("classe").value); // 9
arrForm.push(document.getElementById("securityLevel").value); // 10
arrForm.push(document.getElementById("aggregatore").value); // 11
$.ajax({
url: "asset_GestAsset.php",
type: "POST",
data: {
"fieldValue": JSON.stringify(arrForm)
},
success: function(data) {
var outcomeResearchTable = document.getElementById("OUTCOME_RESEARCH_TABLE");
outcomeResearchTable.style.display = "flex";
var outComeRT = $('#OUTCOME_RESEARCH_TABLE').DataTable({
paging: true,
"bAutoWidth": false,
"dom": 'ltipr',
"data": data,
"destroy": true,
"pageLength": 100,
"scrollY": 400,
"scrollX": true,
"ordering": true
});
},
error: function(err) {
alert("Errore " + err);
}
});
}