Estoy tratando de hacer que mi tabla de datos Thead sea pegajosa, pero cuando probé el encabezado fijo, no funciona. He intentado position: fixed; , top: 0; e intente arreglarlo con css, pero cuando se realiza esta acción, funciona en Firefox como se esperaba, pero no funciona como se esperaba en Chrome Edge Opera.
"stateSave": false, "orderCellsTop": true, "fixedHeader": { header: true, }, "columns": [ {'data':'chk_select_header','orderable': false},Aquí está mi código de ajax.
Traté de arreglar mi cabeza aquí en mi tabla de datos. Pero esta tabla de datos arregló ese encabezado en la parte superior de la página como esta https://datatables.net/extensions/fixedheader/examples/options/simple.html pero quería que se pegara a esa tabla de datos div. Encontré la única forma de hacerlo usando este método CSS a continuación
thead tr:first-child Th { position: sticky; z-index: 12; top: 0; background: white;}
thead Th { position: sticky; z-index: 12; top: 51px; background: white; }Este es el método más simple para pegar el encabezado de la tabla de datos al encabezado de la tabla.
¿Por qué no intentas arreglar tu thead th usando position: sticky for th .
thead Th { position: sticky; z-index: 1; top: 0; }FixedHeader , una extensión de tablas de datos, puede ser:
Esta funcionalidad está incorporada en la extensión, no es necesario hacer nada por separado con CSS, etc. Así es como se inicializa:
$('#myTable').DataTable( { fixedHeader: true } ); O, después de que se haya construido la tabla de datos, se puede agregar usando una new palabra clave con la función $.fn.dataTable.FixedHeader :
var table = $('#myTable').DataTable(); new $.fn.dataTable.FixedHeader( table, { // more options } );