我正在使用 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 固定列
非常感谢,对我糟糕的英语感到抱歉
最佳答案
这是一个黑客,但你可以尝试,
<style>
.DTFC_LeftBodyLiner{overflow-y:unset !important}
.DTFC_RightBodyLiner{overflow-y:unset !important}
</style>
关于jquery - 固定列数据表中的水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50646358/