4

Montei uma tabela com CSS, porém estou tendo um problema quando os relatórios são abertos em celular ou tablet. A tabela fica achatada, ou dados ficam confusos.

Tem como colocar uma barra de rolagem na horizontal, e evitar que os dados fiquem achatados?

Segue a tabela como esta:

.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
    background: #F7F7F7;
} 
.tab_dados tr:nth-child(even) {
    background: #FFFFFF;
}
.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}
 <!-- TABELA -->
        <table class="tab_dados">
            <tr>
                <th style="width: 30px;"></th>
                <th>CÓDIGO</th>
                <th>NOME</th>
                <th>CIDADE</th>
                <th>CIDADE</th>
                <th>CIDADE</th>
                <th>CIDADE</th>
                <th>CIDADE</th>
                <th>ESTADO</th>
            </tr>
            <tr id='2'>
                <td>&nbsp;</td>
                <td>25</td>
                <td>HUGO</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>MG</td>
            </tr>
            <tr id='3'>
                <td>&nbsp;</td>
                <td>25</td>
                <td>HUGO</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>MG</td>
            </tr>
            <tr id='4'>
                <td>&nbsp;</td>
                <td>25</td>
                <td>HUGO</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>MG</td>
            </tr>
            <tr id='5'>
                <td>&nbsp;</td>
                <td>25</td>
                <td>HUGO</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>BOA ESPERANÇA</td>
                <td>MG</td>
            </tr>
        </table>

1
  • Aumentar a largura tab_dados para 200% nas resoluções que tu quer não te ajudaria? Commented 13/02/2017 às 16:21

4 Respostas 4

5

Você precisa botar uma div fora da tabela, contendo a tabela. Exemplo:

<div class="table">
    <table class="tab_dados">(conteúdo...)</table>
</div>

E por as seguintes classes:

div.table {
    overflow-x: scroll;
}
th, td {
    min-width: 50px; /* width/largura das células à escolha */
}

Você precisaria de um mínimo de conhecimento em Media Queries para aplicar somente aos dispositivos desejados.

2

Você deveria colocar uma div como o colega @Leon Freire falou, só que você coloca em css o tamanho da div assim como também o tamanho da tabela, logo após isso, você utiliza o comando overflow em css.

#caixa_tabela{
        width: 150%; /* aqui pode ser auto ou 100%*/
        overflow-x: auto;
    }
    .tab_dados {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }
    .tab_dados a {
        color: #484848;
        text-decoration: none;
    }
    .tab_dados th {
        background: #0091FF;
        color:#FFFFFF;
        font-style: italic;
    } 
    .tab_dados tr {
        height: 50px;
        border-bottom: 1px solid #D5D5D5;
    }
    .tab_dados tr:nth-child(odd) {
        background: #F7F7F7;
    } 
    .tab_dados tr:nth-child(even) {
        background: #FFFFFF;
    }
    .tab_dados tr:hover {
        background: #F1F1F1;
    }
    tfoot tr td{
        border:0;
        height: 40px;
    }
    .tfoot{
        width: 100%;
    }
<div id="caixa_tabela">
     <table class="tab_dados">
        <tr>
            <th style="width: 30px;"></th>
            <th>CÓDIGO</th>
            <th>NOME</th>
            <th>CIDADE</th>
            <th>CIDADE</th>
            <th>CIDADE</th>
            <th>CIDADE</th>
            <th>CIDADE</th>
            <th>ESTADO</th>
        </tr>
        <tr id='2'>
            <td>&nbsp;</td>
            <td>25</td>
            <td>HUGO</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>MG</td>
        </tr>
        <tr id='3'>
            <td>&nbsp;</td>
            <td>25</td>
            <td>HUGO</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>MG</td>
        </tr>
        <tr id='4'>
            <td>&nbsp;</td>
            <td>25</td>
            <td>HUGO</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>MG</td>
        </tr>
        <tr id='5'>
            <td>&nbsp;</td>
            <td>25</td>
            <td>HUGO</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>BOA ESPERANÇA</td>
            <td>MG</td>
        </tr>
    </table>
</div>

0

Olá,

A forma mais simples que encontrei foi colocar a tabela dentro de uma div. No exemplo, defini a altura máxima em 600px e a largura em 100%. Ajuste como for mais adequado ao seu caso!

Boa sorte!

<div style="overflow: auto; height: 600px; width: 100%">
Sua tabela aqui
</div>
1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 4/01/2023 às 12:14
-1

Na metodologia Material Design o componente Table trata muito bem nessa questão de responsividade para a melhor exibição tanto na web quando mobile.

Para a resoluções menores eles invertem as colunas para linhas e linhas para colunas deixando a primeira coluna fixa.

Utilizando @media query no css para especificar uma resolução para mobile você pode tratar com este mesmo casso.

Vejo um exemplo de Responsive Table com a framework Materialize.

2
  • 1
    Qual a utilização do @keyframes para essa resolução? Você quis dizer @media? Commented 13/02/2017 às 16:35
  • Isso mesmo, desculpe o engano, são os @media query. No site go Material Design especifica bem as resoluções usadas em mobile. material.io/guidelines/layout/… Commented 13/02/2017 às 17:15

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 .