Column width not working in DataTables bootstrap

datatables columns adjust not working
datatable table width not working
datatable column width
datatable change column width dynamically
jquery datatable header width problem
jquery datatables: column width issues with bootstrap tabs
datatable not showing all columns
datatables column min-width

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>

When setting columns widths, you also need to set:

autoWidth: false

...on the DataTable itself

Column width not working, Did not find solution. <--! Datatables spezific files:--> <link href="~/datatables/​dataTables.bootstrap.min.css" rel="  However in “Tab 2” width of the columns in the header do not match width of the columns in table body. Also in some cases table may appear as having the data missing.

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

jQuery DataTables: Column width issues with Bootstrap tabs , Provides solutions to common problems with incorrect column widths for a table using jQuery DataTables and Bootstrap tabs. Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. jQuery DataTables – Column width issues with Bootstrap tabs ( Incorrect column widths) - JSFiddle - Code Playground Close

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

jQuery DataTables – Column width issues with Bootstrap tabs , <a href="https://www.gyrocode.com/articles/jquery-datatables-column-width-​issues-with-bootstrap-tabs/">See full article on Gyrocode.com</a>. 7. <hr><br>. 8​. ​. The quickest way to fix this is to simply give column sizes to your table headers. Whatever the width of your table headers your table data will conform to that size. Knowing this we can alter the above example to make description take up less space and give a little bit more to other columns.

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

   "autoWidth":false,

is working for me

Bootstrap jquery dataTable fixed columns Width, class="container-fluid">. 2. <div class="col-md-12">. 3. <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%"​>. I'm trying to add a table to my website where the column width is not simply determined by the text width, and I saw on another website that you can do this in bootstrap using the same 12 cell system you use for grids. (See here)When I added this sample table to my code, however, it did not behave at all like expected.

For Auto Adjustment , Add this explicitly

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


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

FixedColumns example - Fluid column width, FixedColumns example Fluid column width. The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width  You can try using the autoWidth prop - it will adjust each column's width to its content. If this solution will not work for you, you can inspect the element in your dev tools and write custom CSS.

[SOLVED] Help needed - Cannot set datatables width, @fabioi you're setting the table column width to be col-md-3. That's your problem. Bootstrap is doing its thing. Posted 5 years ago by mstnorris (  Responsive table extension This example show Editor being used with the Responsive extension for DataTables . Responsive will automatically adjust the visibility of columns in your tables so the the layout of information is nicely presented, regardless of screen size.

FixedColumns example - Fluid column width, FixedColumns example Fluid column width. The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width  If you run the example and look at the width of the 10xxxx column, then click on the "toggle columns" button, and re-check the 10xxxx column, you should see that the width is larger when the columns are toggled off. If you toggle them back to "on", the columns will be compressed again to their original size.

DataTables Options, One known issue with autoWidth = FALSE is that the width option for columns will not work, so if you want to configure widths for columns, you have to use  The first step is to obtain the library from the DataTables website. 1.9.4 is the current stable version and 1.10 is in development now. If you don’t want to download the files, you can also

Comments
  • How does your markup looks like?
  • Its using autowidth and not taking the width I specified. So certain columns are narrower than I expect it to be.
  • Yes, that is what we can see in the question - but how is your markup, the table structure, i.e <table class="x y z" id="something"><thead>.... etc?
  • I have updated the question with the markup of the table. @davidkonrad
  • This solution helped with my issue where table with same column class receive different width when dataTable is triggered.
  • Your table doesn't wrap when you have a non-breaking word. See updated fiddle: jsfiddle.net/9vbz7thp/32
  • @kimli, this is because you wrongly target table.dataTable thead tr td in the updated fiddle, obviously that should be table.dataTable TBODY tr td -> jsfiddle.net/9vbz7thp/33 then it works.
  • On my case I needed to add "autoWidth: false" as well. Above only not worked for me.
  • This is a good answer but will only work with DataTables v1.10 and up. OP's question appears to be using v1.9.
  • What is "MyItemst"? I don't see that anywhere in the OP.