Colunas de inicialização responsivas datáveis que não colapsam no ponto correcto
É um problema muito directo. Se eu reduzir a largura da minha janela mais 1 pixel a coluna irá finalmente colapsar. Se o expandir, volta a este estado. Eu gostaria de evitar o excesso do painel de inicialização pai. Eu removi o bootstrap grid divs (row / col-xs-12, etc) para eliminar problemas poticiais, mas uma vez que isso é Resolvido (ou eu melhor entender o problema) eu pretendo utilizar o sistema de grade bootstrap também.
Aqui está um plunkr que replicou perfeitamente o problema (fechar a vista de execução):
http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Tables - PixelAdmin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
<style>
body {
font-size: 140%;
}
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</style>
</head>
<body style="padding-top: 40px;">
<div class="panel panel-primary" style="margin: 51px; padding: 0;">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body" style="padding: 0;">
<div style="width: 100%; border: 1px solid red;">
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#example')
.dataTable({
"responsive": true,
"ajax": 'data.json'
});
});
</script>
</body>
</html>
5 answers
Adicionar o Div com a classe "resposta à tabela" antes do início da tabela e apagar a largura = "100%" da marca da tabela ,
<div class="panel panel-primary" style="margin: 50px;">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<div style="width: 100%; padding-left: -10px; border: 1px solid red;">
<div class="table-responsive"> // add this div
<table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> // remove width from this
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Eu sei que este post é velho, para qualquer um que tentar fazer isso simplesmente fazer isso
<table id="example" class="display" cellspacing="0" width="100%"></table>
Adicione largura= "100%" deve tomá-lo e torná-lo sensível sem qualquer configuração desse
Olha para isto a trabalhar Violino
<div class="row">
<div class="table-responsive">
... //table here
</div>
</div>
A razão para isto foi que a versão do DataTables bootstrap estava a adicionar um pouco de col-* à barra de ferramentas (no meu caso) que estavam a cair como filhos directos sob outro col- pai. O col- idealmente deve ser filhos do Remo em vez do col (tanto quanto eu entendo).
No meu caso, descobri que esconder a mesa ou o contentor na carga da página usando o ecrã CSS:nenhum estava a evitar o comportamento sensível.
A solução (sem preconceitos) é esconder a tabela ou é contêiner por JavaScript em vez de CSS.
O meu caso é igual ao cem, mas no meu caso resolvi adicionando setTimeout para esperar um pouco (cerca de 200 milisegundos) para definir datável