数据表格 功能列宽设置不起作用
2017-05-03 15:36:09
刘继振
  • 访问次数: 3
  • 注册日期: 2017-05-03
  • 最后登录: 2017-11-06

数据表格功能确实很牛,但是用法不太详细。碰见个奇怪的问题, 列宽竟然不起作用了,不知道为什么,查看事例源码都是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>



刘继振 最后编辑, 2017-05-03 15:46:42
沙发
2017-05-05 10:42:37
sunhao
  • 访问次数: 277
  • 注册日期: 2015-04-20
  • 最后登录: 2023-12-13

你需要使用 data-width 来设置数据表格的宽度, width 作为原表格的属性使用。

1/1