Question

这是我的data table。

我似乎无法控制任何列的宽度：

var ReminderSet = function (name) {
  this.name = name;
  this.reminders = [];
}

ReminderSet.prototype.add = function (reminder) {
  this.reminders.push(reminder);
  return this;
}

ReminderSet.prototype.list = function() {
  console.log(this.reminders);
}

var Reminder = function (description) {
  this.description = description;
}


var work = new ReminderSet('work')
  .add(new Reminder('Get to work on time!'))
  .add(new Reminder('Finish all my work!'));

var school = new ReminderSet('school')
  .add(new Reminder('Finish my coursework'))
  .add(new Reminder('Study for my exams!'));

work.list();
school.list();

我尝试了各种方法here:

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

here：

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

没有成功。任何人都可以告诉我如何手动控制某些列的宽度？我希望可以使用数据表中的现有方法来完成。

注意：如果我有机会，我会发一个小提琴。 fiddle here - 它不完全相同，但如果我的理解是正确的，我应该在这里控制列宽：

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

Answer 1

我的经验是columns.width主要适用于相对意图，即＆＃34;我希望此专栏相对较大＆＃34;。有很多可以对每个列宽度造成影响，即使您使用精确百分比仔细定位每个列，最多也会增加100个，但最终会让您感到沮丧。

如果您想要精确，精确的列宽定义，则无法绕过硬编码的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/

Answer 2

类似

#table-foo td:nth-child(3),
#table-foo td:nth-child(4) {
  width: 5%;
  max-width: 5%;
}

为我工作，您可以按用逗号分隔的规则指定列

Answer 3

如果你有一个这样的表，你使用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>

要控制列的宽度，可以添加此

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

将inline style添加到列中可以完美地运行。如果您在dev tools中注意到，您会看到datatable内联width，所以您使用CSS文件应用任何内容，它都会被覆盖。将inline CSS添加到列对我来说很好。希望这会有所帮助。

Answer 4

$(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();
            }
        } );
    } );
} );

您可以参考http://jsfiddle.net/7bh7w2tu/10查看相同的

如何在数据表中设置某些列宽的列宽

4 个答案: