javascript - gratis - Duplicar el encabezado vacío se produce en la tabla de datos al habilitar scrollX o scrollY cuando se usa Google Chrome

javascript no funciona en chrome

Question

Tengo una datatable en mi programa. Y quiero que se pueda desplazar horizontalmente, así que lo que hice fue así:

var tableI = $(''#table_data'').DataTable({
    "bLengthChange": false,
    "scrollX": true,
     "dom": ''frtp''
});

Salió así (como salida de muestra):

Dobló el encabezado. ¿Cómo voy a arreglar esto?

EDITAR: Aquí hay otra muestra:

aquí está mi código HTML:

<table class="table table-striped" id="act_data" width="100%">  <div style="float:left;width:385px" >
    <button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button>
      <button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button>
      <!-- <button type="button" id="refresh" class="btn btn-link"  data-target="#DeAcc"><span class="fa fa-refresh"></span></button>-->
      <a href="<?php echo site_url(''admin/homeAdmin/homepage'')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a>
    </div><thead class="header">
      <tr class="well">
        <th style="font-size: 14px;">Employee ID#</th>
        <th style="font-size: 14px;">Username</th>
        <th style="font-size: 14px;">Account Type</th>
        <th style="font-size: 14px;">Status</th>
      </tr>
    </thead>

    <tbody>
      <?php if($result != NULL){?>
        <?php foreach($result as $row){ ?>
            <tr>
               <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->employeeID;?>
                   <input type="hidden" name="userID" id="userID" value="<?php  echo $row->userID;?>" />
                   <input type="hidden" name="pass" id="pass" value="<?php  echo $row->password;?>" />

              </td>

              <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->username;?>
              </td>
              <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->usertype;?>
              </td>
              <td style="font-size: 15px;padding-left: 20px;">
               <?php echo $row->status; ?>
               </td>

          </tr>
        <?php }?>
      <?php }?>
    </tbody>
  </table> 

Answer 1

Pruebe algo como esto:

"scrollX": ''100%'',

"scrollXInner": ''125%'',

Answer 2

Tuve el mismo problema con la edición para desarrolladores de Firefox y Firefox. La causa principal es que cuando establecemos scrollX:true , datatable agrega un div adicional con una tabla y un encabezado dentro, aparte de la tabla y el encabezado ya construidos. Esto es para obtener el desplazamiento dentro del efecto de mesa.

Datatable, intenta establecer la altura en 0px, para ocultarlo. Algunos navegadores no interpretan esto correctamente.

<tr style="height: 0px;" role="row"> 

Para ocultarlo, cambiar el estilo de esta fila a ''oculto'' romperá la estructura de la tabla. La solución de trabajo sería, tener visibility:''collapse''

Configuración de tabla de datos de muestra:

        tableElement.DataTable({
            "scrollX": true,
            "initComplete": function(settings, json) {
                $(''.dataTables_scrollBody thead tr'').css({visibility:''collapse''});
            }
            //other datatable configurations...  
        });

dado que es una tabla, debemos tener visibilidad: ''colapso'' y no visibilidad: ''oculto'' - más información sobre la propiedad css de visibilidad

Answer 3

Tuve el mismo problema en Google Chrome. Esta fue la solución:

.dataTable(
        {
          "processing": false,
          "serverSide": false,
          "autoWidth": true,
          "columnDefs": [
            {"orderable": false, "targets": [5, 6]}
          ],
          "order": [1, ''asc''],
          "dom": ''l<"toolbar">frtip'',
          drawCallback: function () { // this gets rid of duplicate headers
              $(''.dataTables_scrollBody thead tr'').css({ display: ''none'' }); 
          },
          scrollY: ''65vh'',
          scrollCollapse: true,
          paging: false
        });

Answer 4

Puede usar el código siguiente en su CSS:

div.dataTables_scrollHeadInner table { margin-bottom: 0px !important; }

Answer 5

Esto funcionó para mí:

$(''#DataTables_Table_0'').on( ''draw.dt'' function() {
    $(''.dataTables_scrollBody thead tr'').addClass(''hidden'')
}

Referencia: respuesta de geam de marzo de 2015 en el foro datatables.net

Answer 6

Buena explicación de Sairam. Una mejor sería usar solo un CSS

div.dataTables_scrollBody thead {           
    display: none;
}