Eu tenho um problema intrigante que pensei ter resolvido com uma solução irregular, mas resolvi apenas pela metade. Estou usando o Datatables for Jquery e estou carregando dados de um banco de dados para preencher a tabela.
Devo notar que vem desenvolvendo usando o Firefox.
Além disso, tenho uma barra de rolagem horizontal eas cinco primeiras colunas são fixas. Isso representa um problema porque, antes de todos os dados serem carregados, a tabela de dados coloca uma barra de rolagem horizontal. Alguns dos dados carregados após a inicialização da barra de rolagem são mais longos e, assim, aumentam as larguras das colunas.
Para resolver isso, eu chamo de redimensionamento
<script type="text/javascript">
setTimeout(function(){
window.dispatchEvent(new Event("resize"));
},2000);
</script>
O que acontece aqui é que vejo a página carregar, oa tabela é inicialmente bagunçada, mas após um breve atraso (um pouco menos de 2 segundos, como deveria ser devido ao tempo que eu dediquei ao tempo limite), a tabela se corrige por causa do redimensionamento da janela.
Eu pensei que o problema estava resolvido, até começarteste no Chrome. A tabela será inicialmente desarrumada, assim como no Firefox, mas uma vez que o redimensionamento é chamado, a tabela se estende horizontalmente, perde a barra de rolagem horizontal e a janela do Chrome recebe uma. Isso não é ideal porque o objetivo da barra de rolagem é manter a tabela dentro da largura do tamanho da tela.
Para conter a largura da tabela, eu uso o seguinte CSS:
div.dataTables_wrapper{
width: 96vw;
margin: 0 auto;
}
Eu defino a tabela assim.
$(document).ready(function() {
$("#example").dataTable( {
"scrollX": true
} );
} );
new $.fn.dataTable.FixedColumns(example,{
leftColumns:5
});
Qualquer ajuda é apreciada.
Respostas:
0 para resposta № 1Você tem que forçar o width do datatables_scrollBody para 100% a fim de manter a barra horizontal visível.
.dataTables_scrollBody {
width: 100%!important;
}