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> </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> </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> </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> </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>
tab_dados
para 200% nas resoluções que tu quer não te ajudaria?