数据表格功能确实很牛,但是用法不太详细。碰见个奇怪的问题, 列宽竟然不起作用了,不知道为什么,查看事例源码都是DIV包裹的,直接把datatable
放到table上怎么都不行,请老师们解释一下,或者提供一下解决方案。
<table class="table datatable table-striped table-hover table-bordered table-condensed table-fixed" style="table-layout:inherit !important; ">
<thead>
<tr>
<th class="text-nowrap" style="width: 100px; min-width: 60px;">#</th>
<th class="text-nowrap" width="250">时间</th>
<th class="text-nowrap">事件类型</th>
<th class="text-nowrap">描述</th>
<th class="text-nowrap">相关人物</th>
<th class="text-nowrap">评分</th>
<th class="text-nowrap">评分</th>
<th class="text-nowrap">评分</th>
<th class="text-nowrap">评分</th>
<th class="text-nowrap">评分</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">101024</td>
<td class="text-nowrap" width="250">2017-03-27 11:01:24</td>
<td class="text-nowrap">Z864</td>
<td class="text-nowrap">绿巨人</td>
<td class="text-nowrap">唱歌</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.3</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
</tr>
<tr>
<td class="text-nowrap">101024</td>
<td class="text-nowrap" width="250">2017-03-27 11:01:24</td>
<td class="text-nowrap">Z864</td>
<td class="text-nowrap">绿巨人</td>
<td class="text-nowrap">唱歌</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.1</td>
<td class="text-nowrap">5.3</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
</tr>
<tr>
<td class="text-nowrap">101024</td>
<td class="text-nowrap" width="250">2017-03-27 11:01:24</td>
<td class="text-nowrap">Z864</td>
<td class="text-nowrap">绿巨人</td>
<td class="text-nowrap">唱歌</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.3</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
</tr>
<tr>
<td class="text-nowrap">101024</td>
<td class="text-nowrap" width="250">2017-03-27 11:01:24</td>
<td class="text-nowrap">Z864</td>
<td class="text-nowrap">绿巨人</td>
<td class="text-nowrap">唱歌</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.3</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
</tr>
<tr>
<td class="text-nowrap">101024</td>
<td class="text-nowrap" width="250">2017-03-27 11:01:24</td>
<td class="text-nowrap">Z864</td>
<td class="text-nowrap">绿巨人</td>
<td class="text-nowrap">唱歌</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.3</td>
<td class="text-nowrap">5.5</td>
<td class="text-nowrap">5.5</td>
</tr>
</tbody>
</table>
<script>
$('.datatable').datatable({sortable: true});
</script>