Boa tarde pessoal, eu tenho uma table html onde estou exibindo dados vindos do banco de dados nas linhas da table (tr), eu estou tentando exibir as linhas na table umas ao lado das outras com as td's umas em baixo das outras e quero que tenha scroll horizontal, mas só estou conseguindo exibir somente uma linha, as outras ficam umas em baixo das outras e a table fica com scroll vertical. Qual a melhor forma de fazer isso? Abaixo está o que estou tentando.
Obrigado desde já.
HTML:
<div class="datagrid_usuarios">
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Nome Do Usuário</th>
<th>Código Do Usuário</th>
<th>Cargo</th>
<th>E-mail</th>
<th>Nível De Acesso</th>
<th>Usuário Ativo Ou Inativo</th>
<th>Ação</th>
</tr>
<?php
if ($result > 0) {
while ($linha = mysqli_fetch_array($exec_query)) {
?>
</thead>
<tbody>
<tr>
<td><?php echo $linha['ID_USU']; ?></td>
<td><?php echo $linha['NOME_USU']; ?></td>
<td><?php echo $linha['CODIGO_USU']; ?></td>
<td><?php echo $linha['CARGO_USU']; ?></td>
<td><?php echo $linha['EMAIL_USU']; ?></td>
<td><?php echo $nivel_acesso_usu[$linha['NIVEL_ACESSO_USU']]; ?></td>
<td><?php echo $ativo_ou_inativo[$linha['ATIVIDADE_USU']]; ?></td>
<td>
<a href="">Alterar</a> |
<a href="">Excluir</a>
</td>
</tr>
<?php }
}
?>
</tbody>
</table>
</div>
CSS:
.datagrid_usuarios {
height: 425px;
}
.table-responsive {
display: block;
position: relative;
width: 100%;
}
.table-responsive thead,
.table-responsive tbody,
.table-responsive th,
.table-responsive td,
.table-responsive tr {
display: block;
}
.table-responsive td,
.table-responsive th {
height: 35px;
}
.table th:nth-of-type(8), .table td:nth-of-type(8) {
text-align: left;
width: auto;
}
.table-responsive thead {
float: left;
}
.table-responsive tbody {
width: auto;
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.table-responsive tbody tr {
display: inline-block;
border-bottom: #999999 solid 1px;
}
.table td:last-child {
border-right: #999999 solid 1px;
}
Resultado que estou tendo: