JQuery DataTable 插件宽度问题
Posted
技术标签:
【中文标题】JQuery DataTable 插件宽度问题【英文标题】：JQuery DataTable Plugin Width issues 【发布时间】：2014-09-23 05:49:40 【问题描述】：我正在使用 jQuery 数据表插件。我首先呈现我的 html 表，然后应用插件。它有一些问题。
问题：
标题列和正文列未对齐。
如果有很多列（列是动态生成的，无法设置固定的列宽），数据表会水平增长。
示例代码：
var scrollY = $(window).height() * 80 / 100;
var oTable = $('#myTable').dataTable(
"sScrollX": "100%",
"sScrollY": scrollY,
"bScrollCollapse": true,
"bPaginate": false,
"bStateSave": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bSort": true,
"aaSorting": []
);
oTable.fnAdjustColumnSizing();
这就是我的桌子的样子
如您所见，标题和正文未对齐，表格正在向屏幕右侧扩展。 任何帮助表示赞赏。编辑 我在 JQuery 选项卡中使用这个插件。
【问题讨论】：
数据表使用相同的表作为标题和正文，因此这不应该发生。您是否在表中使用<head></head> 和<body></body> 标签？你能也分享一下html代码吗？
是的，我正在使用 和 标签。其实这个html是用js代码生成的，不方便分享。
如果对您有用，请参阅this
【参考方案1】：
首先我会在创建数据表之前控制 html 结构。它必须如下所示：
<table id="myTable">
<thead>
<tr>
<th></th>
<th></th>
// exact number of th present in the datatable
</tr>
</thead>
<tbody>
</tbody>
</table>
然后我会尝试设置：
"bAutoWidth": true
即使没有 HTML 代码很难解决您的问题...
【讨论】：
我的HTML代码就是这样的。我可以复制完整的表格 HTML。以上是关于JQuery DataTable 插件宽度问题的主要内容，如果未能解决你的问题，请参考以下文章
datatable jquery - 表头宽度与正文宽度不对齐