Good morning!
I walk around here, since a little while ago I started using DataTables for my project, everything was fine, until I tried to use fixedColumns , I relied on the following example
I have the following code
Table (I clarify that the bootstrap 4 link is not because it is directly in the template)
<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" />
<table id="tabla" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>@Html.DisplayNameFor(x => x.Codigo_delfos)</th>
<th>@Html.DisplayNameFor(x => x.nv)</th>
<th>@Html.DisplayNameFor(x => x.cliente)</th>
<th>@Html.DisplayNameFor(x => x.norma)</th>
<th>@Html.DisplayNameFor(x => x.potencia)</th>
<th>@Html.DisplayNameFor(x => x.tension_mayor)</th>
<th>@Html.DisplayNameFor(x => x.tension_menor)</th>
<th>@Html.DisplayNameFor(x => x.material_mayor)</th>
<th>@Html.DisplayNameFor(x => x.material_menor)</th>
<th>@Html.DisplayNameFor(x => x.frecuencia)</th>
<th>@Html.DisplayNameFor(x => x.GrupoDeConexiones)</th>
<th>@Html.DisplayNameFor(x => x.Regulacion)</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(x => item.Codigo_delfos)</td>
<td>@Html.DisplayFor(x => item.nv)</td>
<td>@Html.DisplayFor(x => item.cliente)</td>
<td>@Html.DisplayFor(x => item.norma)</td>
<td>@Html.DisplayFor(x => item.potencia)</td>
<td>@Html.DisplayFor(x => item.tension_mayor)</td>
<td>@Html.DisplayFor(x => item.tension_menor)</td>
<td>@Html.DisplayFor(x => item.material_mayor)</td>
<td>@Html.DisplayFor(x => item.material_menor)</td>
<td>@Html.DisplayFor(x => item.frecuencia)</td>
<td>@Html.DisplayFor(x => item.GrupoDeConexiones)</td>
<td>@Html.DisplayFor(x => item.Regulacion)</td>
</tr>
}
</tbody>
</table>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
JavaScript
$(document).ready(function () {
var table = $('#tabla').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns:
{
leftColumns: 1,
rightColumns: 1
}
});
});
Both the first and the last column are actually fixed, the problem is that a visual bug is generated.
As can be seen in the image, behind the column you can see the text of the other columns that are moving with the scroll.
And on the other side, an individual scroll is added to each of the fixed columns.
I am surprised to arrive at this result using an almost exact example to the one DataTables gives in its documentation.
Did anyone have this problem? How should I face it?
Thank you very much!
EDIT:
After the help of Sebastián Lagos Yañez the table looks better, the first column works perfectly, but I still have problems with the last one (it continues generating horizontal scroll for some reason)
