How to display the tr’s next to each other with the tds one below the other within the html table?

Question

Good afternoon guys, I have an html table where I’m displaying data coming from the database in the table lines (tr), I’m trying to display the lines in the table next to each other with the tds below each other and I want it to have horizontal scroll, but I’m only able to display only one line, the others are below each other and the table is with vertical scroll. What’s the best way to do that? Below is what I’m trying to.

Thanks in advance.

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;
    }

Result I’m having:

Answer 1

In a normal table you have the following html structure:

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>

You set the beginning of a row and add the columns of that row then close it. E.g.: Open the row and add the headers NOME | TELEFONE | ... in the following row all data, John, 91234-1234 ...

In a horizontal table you should open a row and add, first the header of that column (is horizontal but still is a column, at least I will consider it so), and then all cells of the same. Ex.: Opens the name line adds the header NOME and all the names, John, Mary, Joseph ...

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>