数据表在调整大小时不尊重屏幕宽度答案

【问题标题】：Datatable doesn't respect screen width on resize数据表在调整大小时不尊重屏幕宽度
【发布时间】：2021-05-13 12:21:17
【问题描述】：

我有一个在调整屏幕大小时不考虑屏幕宽度的数据表。

我尝试将宽度设置为 100%，但没有成功。

我尝试创建一个宽度为 100% 的父 div，但也没有用。

尝试了自动宽度。没用。

'autowidth': false,

尝试过表格布局：已修复但没有用

table{table-layout:fixed}

我使用php来回显每一行的答案，然后初始化数据表。

<table id="produtos" class="hover display wrap dataTable no-footer dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="produtos_info">
   <thead>
      <tr role="row">
         <th class="sorting_asc" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 53px;" aria-sort="ascending" aria-label="Pedido: Ordenar colunas de forma descendente">Pedido</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 59px;" aria-label="Cliente: Ordenar colunas de forma ascendente">Cliente</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Situação: Ordenar colunas de forma ascendente">Situação</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 86px;" aria-label="Pagamento: Ordenar colunas de forma ascendente">Pagamento</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 101px;" aria-label="Classif.: Ordenar colunas de forma ascendente">Classif.</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Emissão: Ordenar colunas de forma ascendente">Emissão</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 72px;" aria-label="Produção: Ordenar colunas de forma ascendente">Produção</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 67px;" aria-label="Faturam.: Ordenar colunas de forma ascendente">Faturam.</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Financ.: Ordenar colunas de forma ascendente">Financ.</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Exped.: Ordenar colunas de forma ascendente">Exped.</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 62px;" aria-label="Nº NF: Ordenar colunas de forma ascendente">Nº NF</th>
         <th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Entrega: Ordenar colunas de forma ascendente">Entrega</th>
      </tr>
   </thead>
   <tbody>
      <tr role="row" class="odd">
         <td class="sorting_1 dtr-control">999999<input type="hidden" name="data[TESTE_C1]" value="08" id="TESTE_C1"></td>
         <td>NOME TESTE</td>
         <td>Faturado total</td>
         <td>Boleto</td>
         <td>TESTE</td>
         <td>21/01/2020</td>
         <td>/  /</td>
         <td>21/01/2020</td>
         <td>21/01/2020</td>
         <td>22/01/2020</td>
         <td>99999999</td>
         <td style="display: none;">sem dados</td>
      </tr>
      <tr role="row" class="even">
         <td class="sorting_1 dtr-control">999999<input type="hidden" name="data[TESTE_C1]" value="08" id="TESTE_C1"></td>
         <td>NOME TESTE</td>
         <td>Faturado total</td>
         <td>Boleto</td>
         <td>TESTE</td>
         <td>09/10/2020</td>
         <td>/  /</td>
         <td>09/10/2020</td>
         <td>09/10/2020</td>
         <td>09/10/2020</td>
         <td>99999999</td>
         <td style="display: none;">sem dados</td>
      </tr>
      <tr role="row" class="odd">
         <td class="sorting_1 dtr-control">A84505<input type="hidden" name="data[TESTE_C1]" value="08" id="TESTE_C1"></td>
         <td>NOME TESTE</td>
         <td>Faturado total</td>
         <td>Pago</td>
         <td>TESTE</td>
         <td>13/10/2020</td>
         <td>/  /</td>
         <td>14/10/2020</td>
         <td>14/10/2020</td>
         <td>19/10/2020</td>
         <td>99999999</td>
         <td style="display: none;">sem dados</td>
      </tr>
   </tbody>
</table>

数据表配置

        var table = $('#produtos').DataTable({
            responsive: true,
            autowidth: false,
            stateSave: true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese.json"
            },
            dom: 'Bfrtip',
            buttons: [
                //'copyHtml5',
                //'excelHtml5',
                //'csvHtml5',
                //'pdfHtml5'
            ],
        });

上面的数据表是屏幕上生成的代码。

导入文件：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>

【问题讨论】：

您是否加载了 dataTables.responsive.min.js？例如：datatables.net/extensions/responsive/examples/initialisation/…
对于移动设备，响应式效果非常好，我在其他页面上使用它，这些页面在响应式方面根本没有任何问题，但不知何故，特别是它没有。所以是的，我想我导入了所有必要的文件，因为所有页面都导入了相同的文件。

标签： javascript html jquery css datatables

【解决方案1】：

我认为这样做是不可能的，但您可以使用 responsive extension 为数据表制作一个响应式数据表。

在您的代码中添加以下行：

<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>

【讨论】：

我用我导入的文件编辑了问题，我认为响应式扩展附带了它
我认为这不能解决您的问题，但值得一试。添加此样式表：table{table-layout:fixed}
已经试过了，看不出尺寸有问题，因为当我把桌子的一半拿走时它仍然不起作用

【解决方案2】：

因此，这似乎是数据表响应插件的错误。

为了解决这个问题，我不得不为一些特定的屏幕尺寸更改带有媒体查询的 CSS。

我搜索了很多，没有找到任何解决我问题的答案。

当屏幕重新调整数据表的大小时可以正常工作，但是当它从 ajax 请求回调时，它就不行了。

【讨论】：