我有一个固定的head数据表,当向下滚动时,前4行固定在顶部,问题是当我试图使第二行colspan=3成为写着"make me colspan=3"的行时,数据表失去了固定在顶部的能力。我不知道为什么这会影响数据表。谢谢你的帮助。代码:http://jsfiddle.net/xF8hZ/139/
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>234</th>
</tr>
<tr>
<th>Make me </th>
<th>colspan</th>
<th>=3</th>
<th>
<p class="rotatehead">Hazmat</p>
</th>
<th>
<p class="rotatehead">Out of Area</p>
</th>
<th>
<p class="rotatehead">Lite</p>
</th>
</tr>
更新:我刚刚在添加colspan=3后看到了我的控制台,我得到了这个错误:
Uncaught TypeError: Cannot read property 'style' of undefinedjquery.dataTables.js:4138 _fnCalculateColumnWidthsjquery.dataTables.js:3265 _fnInitialisejquery.dataTables.js:6521 (anonymous function)jquery-1.8.3.js:611 jQuery.extend.eachjquery-1.8.3.js:241 jQuery.fn.jQuery.eachjquery.dataTables.js:6047 DataTablejquery.dataTables.js:14691 $.fn.DataTablepriceadjustment.html:30 (anonymous function)jquery-1.8.3.js:974 jQuery.Callbacks.firejquery-1.8.3.js:1084 jQuery.Callbacks.self.fireWithjquery-1.8.3.js:406 jQuery.extend.readyjquery-1.8.3.js:83 DOMContentLoaded
从DataTables复杂标题文档:
请注意,每列必须至少有一个唯一的单元格(即没有colspan的单元格),这样DataTables就可以使用该单元格来检测列并使用它来应用排序。
在您的示例中,尝试应用colspan
的标头column
不包含"唯一单元格"。
然而,您可以通过添加一个没有colspan
的头行,然后将其css设置为display:none;
:来解决这个问题
小提琴
标题示例:
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>234</th>
</tr>
<!-- ADDED: Placeholder row for sorting -->
<tr class="place">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<!-- END Placeholder row for sorting -->
<tr>
<th colspan="3">Make me colspan = 3</th>
<th>
<p class="rotatehead">Hazmat</p>
</th>
<th>
<p class="rotatehead">Out of Area</p>
</th>
<th>
<p class="rotatehead">Lite</p>
</th>
</tr>
<tr>
<th colspan=3>RACK</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>234</div>
</th>
</tr>
<tr>
<th colspan=3>TOTAL</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>345</div>
</th>
</tr>
</thead>
添加了CSS:
.place{
display: none;
}