Um cabeçalho vazio duplicado ocorre na tabela de dados ao ativar o scrollX ou o scrollY ao usar o Google Chrome
Eu tenho uma tabela de dados no meu programa. E eu quero que seja rolável horizontalmente, então o que eu fiz foi assim:
var tableI = $('#table_data').DataTable({
"bLengthChange": false,
"scrollX": true,
"dom": 'frtp'
});
Saiu assim (como exemplo de saída):
Dobrou o cabeçalho. Como vou consertar isso?
EDIT: Aqui está outro exemplo:
aqui está o meu 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>