Table with horizontal scrollbar

Question

I set up a table with CSS, but I’m having a problem when reports are opened on mobile or tablet. The table gets flattened, or data gets confused.

It has how to place a scroll bar horizontally, and prevent the dice from being flattened?

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>

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

Answer 2

You should put a div like colleague @Leon Freire said, only you put in css the size of the div as well as the size of the table, right after that 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>

Answer 3

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

For the 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 handle with this same.

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