I am using the following code to set the column width of a DataTable. During partial page load the width appears to be correct and when it loads completely, the width is off.
<script>
$(document).ready(function () {
$("#memberGrid").dataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "../../Content/swf/copy_csv_xls.swf"
},
"destroy": true,
"info": true,
"bLengthChange": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }]
});
});
</script>
Table Markup
<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid">
<thead class="tablehead">
<tr>
<th style="width: 20%">Name</th>
<th style="width: 20%">Room with</th>
<th style="width: 20%">Extensions</th>
<th style="width: 10%">Travel Protection</th>
<th style="width: 20%">Flying from</th>
<th style="width: 10%">Balance</th>
</tr>
</thead>
<tbody>
<tr class="tablerows">
<td style="width: 20%"><%# Eval("Travelers") %></td>
<td style="width: 20%"><%# Eval("RoomMates")%></td>
<td style="width: 20%"><%# Eval("Extensions")%></td>
<td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td>
<td style="width: 20%"><%# Eval("Airport")%></td>
<td style="width: 10%">$<%# Eval("Balance")%></td>
</tr>
</tbody>
</table>
As such, the width of the column can be controlled using the columns. width option. This example shows the first column being set to width: 200px (note that this is not pixel perfect in a table, the browser will make some adjustments!), a width that is reflected in the fixed column.
Set to 'fixed' for columns with equal widths. Set to 'auto' for column widths that are based on the width of the column content and the table width. The default is 'fixed'.
When setting columns widths, you also need to set:
autoWidth: false
...on the DataTable itself
Would be nice to see your table in action, but I get a strong feeling that this is a pure matter of width of content. Elements with display: table-cell
will try to expand in order to show as much as its content as possible without wrapping. For example, the width of the <th>
that has the caption "Travel Protection", which you define as 10% - you would need a rather broad table to show "Travel Protection" within 10%.
So overrule the default word-wrap
and word-break
settings for <th>
like this :
table.dataTable thead tr th {
word-wrap: break-word;
word-break: break-all;
}
a sort of demo (as said, cannot proof this to your table IRL) -> http://jsfiddle.net/9vbz7thp/
The best thing would be to adjust the content of the <th>
's so they fits to the hardcoded widths.
If it is the content of the <td>
's that grows too large (typically a loooong not breakable word) :
table.dataTable tbody tr td {
word-wrap: break-word;
word-break: break-all;
}
BTW: You do not need to define hardcoded widths in both <th>
and <td>
's. <td>
's automatically get the width from the corresponding <th>
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With