option columns.width 定义列宽

DataTables中文网 4 May 2016

Tags: 不定时一讲


参数详解连接 columns.widthOption

DataTable会根据列内容自动计算列宽,通过设置 autoWidthOption 属性控制是否开启这个功能

同样我们也可以自定义列宽,看下面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//使用 columnDefs 给列设置宽度

$('#example').DataTable( {
  "columnDefs": [
    //给第一列指定宽度为表格整个宽度的20%

    { "width": "20%", "targets": 0 }
  ]
} );

//使用 columns 给列设置宽度

$('#example').DataTable( {
  "columns": [
  //给第一列指定宽度为表格整个宽度的20%

    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );

除了百分比, columns.widthOption 还接受任何 css 值,比如 3em, 20px 等等

1
2
3
4
5
6
$('#example').DataTable( {
  "columnDefs": [
    //给第一列指定宽度为表格整个宽度的 10px

    { "width": "10px", "targets": 0 }
  ]
} );

由于table本身还有样式,比如td有margin,或者padding这些样式,以及td里本身的内容的限制

最终的宽度值和设置的值会有不匹配,设置的是 10px 实际要大于10px ,大家注意下

如果大家也有小技巧和使用经验,欢迎给我发邮件 thxopen@datatables.club


百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……