Lo que quiero hacer es fijar una o varias columnas de una tabla usando css o jquery de manera que no se muevan cuando haga scroll en la tabla, hasta el momento lo que tengo es esto:
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>
Funciona pero el problema viene cuando es muy grande el texto que esta dentro de la columna que se va a fijar, ya he buscado miles de soluciones y no he podido encontrar algo que de verdad haga lo que estoy pidiendo.
Agradecería que pudieran ayudarme, ya que he estado buscando y no he encontrado soluciones. Ya he visto otras preguntas en este foro pero las soluciones que han dado no me han funcionado como quisiera.
He encontrado una librería llamada fixedColumns y funciona, en este proyecto estoy usando la plantilla adminlte el problema es que esta plantilla usa el archivo adminlte.min.js el cual es obligatorio para que funcione bien la plantilla y al agregar la librería fixedColumns hay cierta incompatibilidad por lo que hace que la tabla se vea mal.
<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>
Como podría solucionar esta incompatibilidad ya que obligatoria mente necesito la librería fixedColumns para que funcione el posicionamiento fijo de columnas y el archivo adminlte.min.js para que funcione la plantilla AdminLTE??