Horizontal scrollbar table

Question

Horizontal scrollbar table

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (-1 votes)

2

I've set up a table with CSS, but I'm having a problem when reports are opened on a phone or tablet. The table is flattened, or data is confusing.

Can you put a scrollbar horizontally, and prevent the data from flattening?

Follow the table like this:

.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>

javascript html jquery css

asked by anonymous 13.02.2017 / 17:14

3 answers

check empty input Set Inverval when $ on is set

score 3 · Answer 1

You need to put a div outside the table, containing the table. Example:

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

And by the following classes:

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

You would need a minimum of knowledge in Media Queries to apply only to the devices you want.

score 1 · Answer 2

You should put a div as the colleague @Leon Freire spoke, only you put in css the size of the div as well as the size of the table, shortly thereafter, you use the overflow command in 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>

score -1 · Answer 3

In the Material Design methodology, the Table component handles this responsiveness very well for the best display both on the web and mobile.

For smaller resolutions they invert the columns to rows and rows to columns leaving the first column fixed.

Using @media query in css to specify a resolution for mobile you can deal with this same case.

I see an example of Responsive Table with the framework Materialize .