How do I set the column width of some column width

问题:

This is my data table.

I can't seem to control the width of any of the columns:

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'ajax/data/arrays.txt'
    } );

I have tried various methods here:

$('#example').dataTable( {
  "autoWidth": false
} );

And here:

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

Without success.Can anyone advise me on how I can manually control the width of some individual columns? I am hoping it can be done using existing method in datatables.

Note: I will post a fiddle if I get a chance. fiddle here - It is not exactly the same, but if my understanding is correct, I should be abloe to control the column width here:

var table = $('#example').DataTable();

回答1:

My experience is that columns.width mostly is suitable for relative intents, i.e "I want this column to be relatively larger". There is a lot that can inflict on each column width, and even if you carefully target each column with an exact percentage that add up to 100 you end up frustrated.

If you want exact, precise column width definitions there is no way around hardcoded CSS :

table.dataTable th:nth-child(1) {
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;
}

table.dataTable td:nth-child(1) {
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;
}

http://jsfiddle.net/6eLg0n9z/

回答2:

If you have a table like this that you target using jquery datatable,

<table class="table" cellSpacing="0" width="100%"
                               id="families-table">
       <thead>
            <tr>
                  <th>Name</th>
                  <th >Category</th>
                  <th><abbr title="Description">Des</abbr></th>
             </tr>
        </thead>
</table>

To control the width of a column, you can add this

<table class="table" cellSpacing="0" width="100%"
                               id="families-table">
       <thead>
            <tr>
                  <th **style="width: 250px;"**>Name</th>
                  <th >Category</th>
                  <th><abbr title="Description">Des</abbr></th>
             </tr>
        </thead>
</table>

Adding inline style to a column would work perfectly. If you notice in the dev tools, you would see that datatable assigns width inline, so you apply anything using CSS file, it would be overridden. Adding inline CSS to columns work fine for me. Hope this helps.

回答3:

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').removeAttr('width').DataTable({
            scrollY:        "400px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        columnDefs: [
            { width: 300, targets: 0 },
            { width: 100, targets: 0 },
            { width:100, targets: 0 }
        ],
        fixedColumns: false});

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

you can refer the http://jsfiddle.net/7bh7w2tu/10 for the same