Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 786
alicewilliam86 Avatar asked May 29 '15 17:05

alicewilliam86


People also ask

How do you set the column width in a data 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.

How do you set column width in lightning Datatable?

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


2 Answers

When setting columns widths, you also need to set:

autoWidth: false

...on the DataTable itself

like image 155
ozz Avatar answered Oct 22 '22 02:10

ozz


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

like image 10
davidkonrad Avatar answered Oct 22 '22 01:10

davidkonrad