固定列 DataTables 中的水平滚动

Posted

技术标签:

【中文标题】固定列 DataTables 中的水平滚动【英文标题】:Horizontal scroll in fixed column DataTables 【发布时间】:2018-11-11 18:27:14 【问题描述】:

我正在使用 Bootstrap 4 和 DataTables。

我在尝试修复列时遇到问题,每个固定列都会添加一个水平滚动

这是我的代码

var table = $('#tabla').DataTable(
  //scrollY: "300px",
  scrollX: true,
  paging: false,
  fixedColumns: 
    leftColumns: 1,
    rightColumns: 1
  
);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" />

<div class="container">

<table id="tabla" class="table table-striped table-bordered nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Código Delfos</th>
            <th>Nota de Venta</th>
            <th>Primer Cliente</th>
            <th>Norma</th>
            <th>Potencia</th>
            <th>Tensión Mayor</th>
            <th>Tensión Menor</th>
            <th>Material de arrollamiento mayor</th>
            <th>Material de arrollamiento menor</th>
            <th>Frecuencia</th>
            <th>Grupo de Conexiones</th>
            <th>Regulación</th>
        </tr>
    </thead>
    <tbody>
     
            <tr>
                <td>07-F0CAAEUAFEJ0000B0001</td>
                <td>11756</td>
                <td>DIR.PROV.ENERGIA DE CORRIENTES</td>
                <td>IRAM 2476</td>
                <td>630,00</td>
                <td>33.000</td>
                <td>13.860</td>
                <td>datos</td>
                <td>datos</td>
                <td>datos</td>
                <td>datos</td>
                <td>33000,00( + 5x5,0000% ; - 5x5,00%)</td>
            </tr>
       

    </tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

正如您所见,由于两个滚动条(第一列和最后一列),表格完全出错了,您还可以看到,通过移动滚动条,您可以看到后面单元格的内容。

我做错了什么?

我的代码基于 Bootstrap 4 的 DataTables Fixed Column

非常感谢,对不起我糟糕的英语

【问题讨论】:

我看到您已将 scrollX 设置为 true。你想滚动什么? @chaggy 我有它,因为表格会有 30 列,想法是修复第一列和最后一列,然后水平滚动其他列 尝试移除该元素上的 'overflow-y: scroll;` @chaggy 我试过了,但没有任何改变:S,但我注意到,当我删除 Bootstrap table-bordered 类时,一切都非常合适 @chaggy 您删除的帖子是解决方案!你为什么要删除它? :P 【参考方案1】:

这是一个黑客,但你可以尝试,

<style>
    .DTFC_LeftBodyLineroverflow-y:unset !important
    .DTFC_RightBodyLineroverflow-y:unset !important
</style>

【讨论】:

非常感谢!这正是我需要的! 我看到左边没有边框,之后出现裂痕。无论如何它有效。尽管如此,仍在寻找更好的解决方案。【参考方案2】:

如果你使用BackpackforLaravel bundle,那么只需要更改config/backpack/crud.php中的配置:

'responsive_table' => false,

【讨论】:

以上是关于固定列 DataTables 中的水平滚动的主要内容,如果未能解决你的问题,请参考以下文章

滚动上的 Mui-datatables 固定列 - (左或右)

标题/数据列未与 jQuery dataTables、bootstrap 2.3.2 对齐并启用水平滚动

DataTables:如何将包装文本和水平滚动条放在一起

jquery datatables 固定列在 IE 中未对齐

如何在 Flutter 中创建具有固定列的水平滚动表格?

DataTables 使用 Bootstrap 4 条带表固定列透明