Column width not working in DataTables bootstrap

问题:

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>

回答1:

When setting columns widths, you also need to set:

autoWidth: false

...on the DataTable itself

回答2:

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>.

回答3:

Use the following script when defining datatable properties:

"columns": [ { "width": "25px" }, { "width": "25px" }, { "width": "450px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" } ],

回答4:

For Auto Adjustment , Add this explicitly

var MyDatatable = $("#memberGrid").dataTable();


MyDatatable.columns.adjust().draw();

回答5:

 oTableDetails = $('#tblUserDetails').dataTable({

   "autoWidth":false,

is working for me

回答6:

var reCalculateLayoutDatatable = function(){
reCalculateLayoutDatatableYN = true;
setTimeout(function(){
  var tableHeaderWidth = 0;
  $("body").find("div.dataTables_scrollHeadInner table tr.row-header th").each(function() {
    var cols = 1;
    if(parseInt($(this).attr("colspan")) > 1) {
      cols = parseInt($(this).attr("colspan"));
    }
    tableHeaderWidth += parseInt($(this).attr("data-col-width")) + (15 * cols);
  });
  $("body").find("div").css("width","auto");
  $("body").find("table").css("width","auto");
  $("body").find("div.dataTables_scrollBody table").css("width",tableHeaderWidth + "px");
  $("body").find("div.dataTables_scrollHeadInner table").css("width",tableHeaderWidth + "px");
  $("body").find("th,td").each(function(){
    if($(this).attr("data-col-width") > 0){
      $(this).css("width",$(this).attr("data-col-width") +"px");
    }
  });
},50);
}
$( window ).resize(function() {
   if (reCalculateLayoutDatatableYN == true) {
     reCalculateLayoutDatatable();
   }
});
$( document ).ready(function() {
    reCalculateLayoutDatatable();
});

HTML:

<table id="datatableLarge" class="table">
  <thead>
    <tr class="row-header" >
       <th data-col-width="100">管理番号</th>
       <th data-col-width="350">物件名</th>
       <th data-col-width="40">号室</th>
       <th data-col-width="100" >
          管理区分
       </th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td data-col-width="100">1234</td>
       <td data-col-width="350">物件1</td>
       <td data-col-width="40">号室1</td>
       <td data-col-width="100" >
          管理区分
       </td>
  </tbody>

回答7:

I actually had to take the opposite approach and delete the autoWidth line (same as autoWidth:true) and remember to put the desired width in the same object as my data:

"columns": [{ 'data': 'account.organization_Name', width: '120px' }]

As seen here: http://live.datatables.net/jatazeho/1/edit