在 jQuery 数据表中指定固定的列宽
Posted
技术标签:
【中文标题】在 jQuery 数据表中指定固定的列宽【英文标题】：Specifying a fixed column width in jQuery Datatables 【发布时间】：2014-10-31 15:02:27 【问题描述】：我正在尝试为 jQuery 数据表中的几列指定固定宽度。我试图通过datatables documentation 中指定的列定义来完成此操作，但列和列标题仍会自动调整大小。
这是我一直在使用的 jsFiddle：jsFiddle
JavaScript：
var table = $('#example2').DataTable(
"tabIndex": 8,
"dom": '<"fcstTableWrapper"t>lp',
"bFilter": false,
"bAutoWidth": false,
"data": [],
"columnDefs": [
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"targets": 0
,
"targets": 1,
"targets": 2,
"width": "60px",
"targets": 3,
"width": "1100px",
"targets": 4,
"targets": "dlySlsFcstDay",
"targets": "dlySlsFcstWkTtl",
"width": "60px"
],
"order": [
[1, 'asc']
]
);
HTML：
<div class="forecastTableDiv">
<table id="example2" class="display" cellspacing="0" >
<thead>
<tr>
<th colspan="5"></th>
<th class="slsFiscalWk" colspan="8">201424</th>
<th class="slsFiscalWk" colspan="8">201425</th>
<th class="slsFiscalWk" colspan="8">201426</th>
<th class="slsFiscalWk" colspan="8">201427</th>
</tr>
<tr>
<!--<th></th>-->
<!--<th>Vendor</th>-->
<!--<th>Origin ID</th>-->
<!--<th>Destination</th>-->
<!--<th>Vendor Part Nbr</th>-->
<!--<th>SKU</th>-->
<!--<th>Mon</th>-->
<!--<th>Tue</th>-->
<!--<th>Wed</th>-->
<!--<th>Thu</th>-->
<!--<th>Fri</th>-->
<!--<th>Week Ttl</th>-->
<th></th>
<th>Vendor</th>
<th>Origin ID</th>
<th style="width: 200px">Vendor Part Nbr</th>
<th>SKU</th>
<!-- First week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Second week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Third week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Fourth and final week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
</tr>
</thead>
<tfoot>
</table>
</div>
当我检查实时代码时，我可以看到我在列定义中指定的宽度正在作为样式属性添加到列中，但它与列的实际宽度不匹配。
【问题讨论】：
$('#example').DataTable( autoWidth: false, //先关闭自动宽度，然后 【参考方案1】：这不是数据表问题。见how column widths are determined。基于这个算法，我看到了以下两种解决方案。
解决方案 1
自行计算表格宽度并进行相应设置。
#example
width: 3562px;
在此处查看实时示例：http://jsfiddle.net/cdog/jsf6cg6L/。
解决方案 2
设置每个单元格的最小内容宽度（MCW），让用户代理确定列宽。
为此，将类添加到目标列以便能够设置它们的样式：
var table = $('#example').DataTable(
tabIndex: 8,
dom: '<"fcstTableWrapper"t>lp',
bFilter: false,
bAutoWidth: false,
data: [],
columnDefs: [
class: 'details-control',
orderable: false,
data: null,
defaultContent: '',
targets: 0
,
targets: 1
,
class: 'col-2',
targets: 2
,
class: 'col-3',
targets: 3
,
targets: 4
,
targets: 'dlySlsFcstDay'
,
targets: 'dlySlsFcstWkTtl'
],
order: [[1, 'asc']]
);
然后为每个类设置所需的最小宽度属性值：
.col-2,
.dlySlsFcstWkTtl
min-width: 60px;
.col-3
min-width: 1100px;
在此处查看实时示例：http://jsfiddle.net/cdog/hag7Lpm5/。
【讨论】：
简单的答案，但错过了这样的想法【参考方案2】：Here is a code sample (fixed the column width for 4 column table):
-
设置自动宽度：假；
将 px 值设置为前 3 列；
重要： 检查表格宽度是否超过 3 列 + 最后一列；
调整表格宽度和第 4 列。
$('#example').DataTable( //four column table
autoWidth: false, //step 1
columnDefs: [
width: '300px', targets: 0 , //step 2, column 1 out of 4
width: '300px', targets: 1 , //step 2, column 2 out of 4
width: '300px', targets: 2 //step 2, column 3 out of 4
]
);
设置表格宽度，4*300px：
#example width: 1200px ;
因此，您将看到第 3 列的宽度为 300 像素，最后一列将是灵活的，大约为 150 像素（需要额外调整）。
最后但并非最不重要的一点： 固定列大小 300px 不会阻止单元格包含太长（> 300px 没有空格）单词的情况。所以你要记住，所有的词都必须小于你列的固定边。
【讨论】：
【参考方案3】：为<table> 标记或其css class or css id 添加以下样式：
`table
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed;
word-wrap:break-word;
`
【讨论】：
【参考方案4】：设置固定的列宽可能会很痛苦。以下解决方案效果很好。
width: 250, targets: 1, class: "someClass",
render : function ( data, type, row )
if ( type === 'display' )
return `<div style="width:250px"> $data </div>`;
return data;
【讨论】：
以上是关于在 jQuery 数据表中指定固定的列宽的主要内容，如果未能解决你的问题，请参考以下文章