CODEWITHSUNDEEP
twitter-bootstrapdatatableswidth
alicewilliam86
alicewilliam86

Reputation: 513

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>

Upvotes: 26

Views: 110323

Answers (9)

Emerson Stori
Emerson Stori

Reputation: 31

Perhaps the problem is due to the number of columns, if there are too many it will not seem to work. Try to determine a size for the table for example:

style="width: 9000px"

With this change my problem with column width disappeared

                <table id="tbl-PriceDiscrepancy" class="table table-condensed table-hover" style="width: 9000px">
                <thead class="btn-dark">
                    <tr>
                        <th colspan="8" style="text-align: center; background-color: indianred; padding-top: 4px">VIM</th>
                        <th colspan="19" style="text-align: center; background-color: darkslategrey; padding-top: 4px">MIRO</th>
                        <th colspan="12" style="text-align: center; background-color: cornflowerblue; padding-top: 4px">PURCHASING DOCUMENTS</th>
                        <th colspan="5" style="text-align: center; background-color: darkslateblue; padding-top: 4px">MIGO</th>
                    </tr>
                    <tr>
                        <th scope="col">Dp.Vim</th>
                        <th scope="col">Vim.Doc.Type</th>
                        <th scope="col">Completed</th>
                        <th scope="col">Curent.Agent</th>
                        <th scope="col">Multi.Agent</th>
                        <th scope="col">Current.Role</th>
                        <th scope="col">Vim.Block.Status</th>
                        <th scope="col">Vim.Block.Reason</th>

                        <th scope="col">Subsequent.Debit.Credit</th>
                        <th scope="col">Blocked.Due.Price</th>
                        <th scope="col">Payment.Block.Code</th>
                        <th scope="col">Miro.Doc.Num</th>
                        <th scope="col">Plant</th>
                        <th scope="col">Company.Code</th>
                        <th scope="col">Fiscal.Year</th>
                        <th scope="col">Document.Date</th>
                        <th scope="col">Posting.Date</th>
                        <th scope="col">Reference/NF</th>
                        <th scope="col">NF.Type</th>
                        <th scope="col">Vendor.Code</th>
                        <th scope="col">Vendor.Name</th>
                        <th scope="col">Miro.Total.Amount</th>
                        <th scope="col">Miro.Item.Amount</th>
                        <th scope="col">Tax.Amout</th>
                        <th scope="col">Currency</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Base.Unit</th>

                        <th scope="col">Contract.Number</th>
                        <th scope="col">Contract.Item.Number</th>
                        <th scope="col">Contract.Value</th>
                        <th scope="col">Contract.New.Value</th>
                        <th scope="col">Condition.Pricing.Unit</th>
                        <th scope="col">Purchasing.Document.Type</th>
                        <th scope="col">Purchasing.Document.Number</th>
                        <th scope="col">Purchasing.Document.Item</th>
                        <th scope="col">MatNr</th>
                        <th scope="col">Description</th>
                        <th scope="col">PO.Gross.Price</th>
                        <th scope="col">Purchase.Unit.Price</th>

                        <th scope="col">Migo.Document</th>
                        <th scope="col">Migo.Year</th>
                        <th scope="col">Migo.Amount</th>
                        <th scope="col">Migo.Quantity</th>
                        <th scope="col">Migo.Base.Unit</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>


    $('#tbl-PriceDiscrepancy').DataTable({
    "aaSorting": [[0, "desc"]],
    "lengthChange": true,
    "filter": true,
    "ordering": true,
    "info": true,
    "paging": true,
    lengthMenu: [5, 10, 15, 20, 25, 50, 100, 200],
    "iDisplayLength": _displayLenght,
    columnDefs: [{
        targets: 0,
        width: "200px"
    }, {
        targets: 1,
        width: "200px",
    }, {
        targets: 2,
        width: "500px",
        className: "centerCol"
    }]
});

Upvotes: 2

alicewilliam86
alicewilliam86

Reputation: 513

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" }
],

Upvotes: 9

digout
digout

Reputation: 4252

The only thing that worked for me was setting an inline min-width on the column header:

    <table width="100%">
        <tr>
            <thead>
                <th>Ref</th>
                <th style="min-width: 100px">User</th>
                <th>Organisation</th>
            </thead>     
        </tr>
        ...
    </table>

Upvotes: 13

Sean Sa&#250;l Astrakhan
Sean Sa&#250;l Astrakhan

Reputation: 155

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

Upvotes: 0

thinhnv
thinhnv

Reputation: 91

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>

Upvotes: 0

Praveen Kumar Rejeti
Praveen Kumar Rejeti

Reputation: 243

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

   "autoWidth":false,

is working for me

Upvotes: 10

Arun Prasad E S
Arun Prasad E S

Reputation: 10125

For Auto Adjustment , Add this explicitly

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


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

Upvotes: 2

ozz
ozz

Reputation: 5366

When setting columns widths, you also need to set:

autoWidth: false

...on the DataTable itself

Upvotes: 43

davidkonrad
davidkonrad

Reputation: 85558

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

Upvotes: 13

Related Questions