What I want to do is fix one or several columns of a table using css or jquery so that they don't move when I scroll the table, so far what I have is this:
table {
display: block;
overflow-x: auto;
}
.static {
position: fixed;
background: #fff;
}
.first-col {
padding-left: 74.5px!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-bordered" id="example">
<thead>
<tr >
<th>Fecha</th>
<th class="static">Concepto</th>
<th class="first-col">CC</th>
<th >Last</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
<th >Last</th>
<th >Handle</th>
<th >First</th>
<th >Last</th>
<th >Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>03/08/2019</td>
<td class="static">FIJAR</td>
<td class="first-col">0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td class="static">FIJAR</td>
<td class="first-col">0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td class="static">FIJAR</td>
<td class="first-col">4</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
It works but the problem comes when the text that is inside the column to be fixed is very large, I have already searched thousands of solutions and I have not been able to find something that really does what I am asking for.
I would be grateful if you could help me, since I have been searching and I have not found solutions. I have already seen other questions in this forum but the solutions they have given have not worked for me as I would like.
I have found a library called fixedColumns and it works, in this project I am using the adminlte template the problem is that this template uses the adminlte.min.js file which is mandatory for the template to work well and when adding the fixedColumns library there is some incompatibility so it makes the table look bad.
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script>
<script src="../dist/js/adminlte.min.js"></script>
CSS:
th, td { white-space: nowrap; }
tr:nth-child(odd) {
background-color: #ffffff!important;
}
tr:nth-child(even) {
background-color: #c7d1dd!important;
}
JS:
$(document).ready(function() {
var table = $('#example').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
searching: false,
bFilter: false,
ordering: false,
bInfo: false,
fixedColumns: {
leftColumns: 2
}
});
});
HTML:
<table class="table" style="width: 100%;" id="example">
<thead>
<tr>
<th>Fecha</th>
<th>Concepto</th>
<th>CC</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>03/08/2019</td>
<td>FIJAR</td>
<td>0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td>FIJAR</td>
<td>0</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>03/08/2019</td>
<td>FIJAR</td>
<td>4</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
How could I solve this incompatibility since I necessarily need the fixedColumns library for the fixed column positioning to work and the adminlte.min.js file for the AdminLTE template to work??
What I found after searching for hours was the following:
I was working with version 1.10.16 of JQuery DataTables
Version that for some reason does not work correctly with the fixedColumns library in its version 3.3.0 (I do not know if in previous versions there are no problems) so I changed the version of JQuery DataTables to 1.10.20 and with this version it is not giving me problems.