How to display the tr's side by side with the td's one below the other inside the html table?

Question

How to display the tr's side by side with the td's one below the other inside the html table?

Navigation

#1 by (0 votes)

0

Good afternoon guys, I have a table html where I'm displaying data coming from the database on the table (tr) lines, I'm trying to display the lines on the table side by side with the td's one below the other and I want it to have horizontal scrolling, but I'm only able to display only one line, the others are one below the others and the table is vertical scroll. What is the best way to do this? Below is what I'm trying to do.

Thank you 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:

html5 css3

asked by anonymous 25.05.2018 / 00:39

1 answer

___ ___ erkimt What should I alterarar in Git Git Bash to open in my project directory in Windows 10? ______ qstntxt ___

I made the changes in the field (start at :) but it did not work. Any suggestions for this problem?

______azszpr301768___

Simply remove the following statement from the Target field. And point the default directory as you did in the "Start in" field.

%pre%

___ Tips for plan page and how to fix error: Uncaught TypeError: Can not read property 'scrollHeight' of undefined

score 0 · Accepted Answer

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 then add the columns of that row to the date. Eg: Opens the line and adds the NOME | TELEFONE | ... headers in the next line all data, John, 91234-1234 ...

In a horizontal table you should open a row and add the header of that column first (it's horizontal but still a column, at least I'll consider it), and then all the cells in it. Eg: Open the line name add the header NOME and all 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>