0

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:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

2

1 Resposta 1

0

Numa tabela normal você tem a seguinte estrutura html:

td, th {
  border: 1px solid black;
}
<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Linha 1 - Coluna 1</td>
    <td>Linha 1 - Coluna 2</td>
  </tr>
  <tr>
    <td>Linha 2 - Coluna 1</td>
    <td>Linha 2 - Coluna 2</td>
  </tr>
</table>

Você define o início de uma linha e adiciona as colunas daquela linha então a fecha. Ex.: Abre a linha e adiciona os cabeçalhos NOME | TELEFONE | ... na linha seguinte todos os dados, João, 91234-1234 ...

Numa tabela horizontal você deve abrir uma linha e adicionar, primeiramente o cabeçalho daquela coluna (está na horizontal mas ainda sim é uma coluna, pelo menos eu vou considerar assim), e então todas as células da mesma. Ex.: Abre a linha nome adiciona o cabeçalho NOME e todos os nomes, João, Maria, José ...

td, th {
  border: 1px solid black;
}
<table>
  <tr>
    <th>Cabeçalho 1</th>
    <td>Linha 1 - Coluna 1</td>
    <td>Linha 2 - Coluna 1</td>
  </tr>
  <tr>
    <th>Cabeçalho 2</th>
    <td>Linha 1 - Coluna 2</td>
    <td>Linha 2 - Coluna 2</td>
  </tr>
</table>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .