Why my Header alignment is messing when there is no sufficient data there in table?

ravikanthudda

I am using jquery datatable to produce dynamic table and adding Items to datatable dynamically but when there is less element in table header is messed up. When no of sufficient rows inserted in datatable then table gets aligned as shown in below images.

kthorngren

Without seeing your code and knowing all the features you are using we can start with making sure you have width="100%" set in your table tag. Also if the table is hidden when Datatables initializes you will need to use columns().adjust() to recalc the column with when the table becomes visible.

If these don't help please post your Datatables init code and let us know if you are using any styling libraries.

Kevin

ravikanthudda

I am using datatable in my asp.net web application. My html code is as given below.
<asp:Panel ID="rptrPanel" runat="server" CssClass="panel" Style="margin-top: 20px;" Visible="false">
<div style="padding-top: 0px; display: table; margin-left: 5%; width: 90%" class="body1 table">
<table width='95%' id="example1" border='0' cellspacing='0' class='display' cellpadding='3'>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
<tfoot style="font-weight: bolder; font-size: 15px;"></tfoot>
</table>
</div>
</asp:Panel>

and my jquery code is as:

var $dataContainer = $('.table');
oTable = $dataContainer.find('#example1').dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bFilter": false,
"bScrollCollapse": true,
"sScrollY": "380",
"bRetrieve": true,
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15]
}
],
"sPaginationType": "full_numbers",
"bSort" : false,
"sDom": 't'
})