数据表不适合屏幕答案

【问题标题】：Datatables is not fitting in screen数据表不适合屏幕
【发布时间】：2016-09-08 21:25:29
【问题描述】：

我有一个这样定义的datatable：

 <html><body>
 <head>
     <link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
</head>
<body>
<table class="table responsive table-togglable table-hover">
    <thead>
    <tr>
        <th data-toggle="true">ID</th>
        <th >Usuario</th>
        <th >Objeto</th>
        <th >Id del Objeto</th>
        <th class="none">Antes</th>
        <th class="none">Despues</th>
        <th >type</th>
        <th >Creaci&oacute;n</th>
        <th >Actualizaci&oacute;n</th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td>2165</td>
        <td> - </td>
        <td>PersonReferences</td>
        <td>3802973</td>
        <td> -  </td>
        <td> Large Text </td>
        <td>created</td>
        <td>2016-05-11 17:07:23</td>
        <td>2016-05-11 17:07:23</td>
        </tr>
  </tbody>
</table>

<script src="http://rh.dev/assets/materialize/js/jquery-1.11.2.min.js"></script>
<script src="http://rh.dev/assets/js/datatables/datatables.min.js"></script>
<script src="http://rh.dev/assets/js/datatables/extensions/responsive.min.js"></script>

    <script>
    $('.table-togglable').DataTable({
        responsive: true
    });
</script>

分类为“无”的 2 列有效。当我点击行时，它会显示这两个长值。

问题是我可以看到前四列，第五列的一半，而我看不到所有其他列。

知道发生了什么吗？？？

编辑：

这是我生成的标签：

<table class="table responsive table-togglable table-hover dataTable no-footer dtr-inline collapsed" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info" style="width: 2446px;">

【问题讨论】：

标签： jquery laravel datatable

【解决方案1】：

错误在您的 html 中，您缺少标签 tbody，请通过此更改您的代码...

<table class="table responsive table-togglable table-hover">
<thead>
<tr>
    <th data-toggle="true">ID</th>
    <th >user</th>
    <th >object_type</th>
    <th >object_id')</th>
    <th class="none">old_value</th>
    <th class="none">new_value</th>
    <th >type</th>
    <th >created_at</th>
    <th >updated_at</th>
</tr>
</thead>
<tbody>
@foreach($logs as $log)
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td> text </td>
        <td>text </td>
        <td>text</td>
        <td>{{ $log->created_at }}</td>
        <td>{{ $log->updated_at }}</td>
    </tr>

@endforeach
</tbody>
</table>

更新：

如果你使用responsive: true，你应该导入css responsive

https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css

结果：https://jsfiddle.net/cmedina/7kfmyw6x/48/

【讨论】：

mmmm.. 现在我左边有绿色开关，但问题仍然存在...可能是样式问题...
我可以在我的标签中看到：style="width: 2446px;"但我不知道它是从哪里来的……当我删除它时，它就起作用了！

@JuliatzindelToro 你在我的 jsfiddle 中遇到了同样的问题？？

@JuliatzindelToro 那么问题出在表的元素父级，响应式继承父标记的宽度

让我们continue this discussion in chat。