Tengo una tabla dentro de un DIV. Estoy aprendiendo CSS estuve estudiando varios códigos de ejemplo. Básicamente necesito completar la tabla con registros de 8 campos , visualizando la barra de scroll vertical , y sin scroll horizontal. Necesito se vea bien en formato desktop , como tambien en resolucion de mi tablet , 1280x800, tanto en portrait como en landscape. Logré "casi" la funcionalidad , pero a veces la barra de scroll queda separada de la tabla , otras no se muestra , otras la tabla queda sin centrar. Creo que estoy errando algunas cosas por no conocer. Esta casi .. me ayudan a que quede funcional ? Armá un ejemplo con el css que tengo ! Gracias
archivo : prueba01.php
body {
font-family: "Lato", sans-serif;
text-align: center;
margin: 0 auto;
width: 100%;
cursor: url(cursor.png) 20 20, auto;
background-image: url(img/bg_content.png);
overflow: hidden;
}
table {
border-spacing: 0;
display: flex;
max-height: 40vh;
table-layout: fixed;
border:1px solid gray;
}
thead{
margin-top: -1;
background-color: #f1eee9;
position: fixed;
}
th{
border-bottom: 1px solid #c4c0c9;
border-right: 1px solid #c4c0c9;
background-color: #75F3F3;
text-align: center;
}
th,td{
font-weight: normal;
margin: 0;
max-width: 11vw; /**Ancho por celda*/
min-width: 11vw;/**Ancho por celda*/
word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
font-size: 11px;
height: 3.5vh !important;/*El mismo alto para todas las celdas**/
padding: 4px;
border-right: 1px solid #c4c0c9;
}
tr:nth-child(2n) {
background: none repeat scroll 0 0 #DBFCFC;
}
tr:nth-child(1n) {
background: none repeat scroll 0 0 #FFF;
}
#contiene_tabla {
max-width: 100%; /* Debería ser 1300px fijos*/
margin-top: 63px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
}
tr:hover {
background-color: #C2F3FE;
color: #339;
}
tbody tr td:nth-child(1),
tbody tr td:nth-child(2),
tbody tr td:nth-child(4){
text-align: center;
}
tbody tr td:nth-child(3){
text-align: left;
}
tbody tr td:nth-child(5),
tbody tr td:nth-child(6),
tbody tr td:nth-child(7),
tbody tr td:nth-child(8){
text-align: right;
}
@media (min-device-width: 300px) and (max-device-width: 810px) {
tbody {
display: block;
margin: 0 auto;
overflow-x: hidden;
}
#contiene_tabla {
max-width: 957px;
margin-top: 63px;
margin-left: 10px;
height: 1220px;
overflow-y: scroll;
overflow-x: hidden;
}
}
@media (min-device-width: 811px) and (max-device-width: 1280px) {
tbody {
margin: 0 auto;
display: block;
overflow-y: scroll;
overflow-x: hidden;
}
#contiene_tabla {
max-width: 100%;
margin-top: 63px;
height: 650px;
overflow-y: scroll;
overflow-x: hidden;
}
}
@media (orientation:portrait){
tbody {
display: block;
overflow-x: hidden;
}
}
<div id="contiene_tabla">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>SOCIO</th>
<th>ZONA</th>
<th>NOMBRE, APELLIDO</th>
<th>NIVEL</th>
<th>PUNTOS</th>
<th>PROMEDIO</th>
<th>FECHA1</th>
<th>TIEMPO</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">ESPACIO EN bLANCO</td>
</tr>
<tr>
<td>" . $b1 . $vsocio . $b2 . "</td>
<td>" . $b1 . $vzona . $b2 . "</td>
<td>" . $b1 . substr($vnombre . ", " . $vapellido,0,30) . $b2 . "</td>
<td>" . $b1 . substr($vnivel, 0, 3) . $b2 . "</td>
<td>" . $b1 . $vpuntos . $b2 . "</td>
<td>" . $b1 . $vprome . $b2 . "</td>
<td>" . $b1 . $vdias . $b2 . "</td>
<td>" . $b1 . $i . " min." . "</td>
</tr>
<tr>
<td>" . $b1 . $vsocio . $b2 . "</td>
<td>" . $b1 . $vzona . $b2 . "</td>
<td>" . $b1 . substr($vnombre . ", " . $vapellido,0,30) . $b2 . "</td>
<td>" . $b1 . substr($vnivel, 0, 3) . $b2 . "</td>
<td>" . $b1 . $vpuntos . $b2 . "</td>
<td>" . $b1 . $vprome . $b2 . "</td>
<td>" . $b1 . $vdias . $b2 . "</td>
<td>" . $b1 . $i . " min." . "</td>
</tr>
<tr>
<td>" . $b1 . $vsocio . $b2 . "</td>
<td>" . $b1 . $vzona . $b2 . "</td>
<td>" . $b1 . substr($vnombre . ", " . $vapellido,0,30) . $b2 . "</td>
<td>" . $b1 . substr($vnivel, 0, 3) . $b2 . "</td>
<td>" . $b1 . $vpuntos . $b2 . "</td>
<td>" . $b1 . $vprome . $b2 . "</td>
<td>" . $b1 . $vdias . $b2 . "</td>
<td>" . $b1 . $i . " min." . "</td>
</tr>
<tr>
<td>" . $b1 . $vsocio . $b2 . "</td>
<td>" . $b1 . $vzona . $b2 . "</td>
<td>" . $b1 . substr($vnombre . ", " . $vapellido,0,30) . $b2 . "</td>
<td>" . $b1 . substr($vnivel, 0, 3) . $b2 . "</td>
<td>" . $b1 . $vpuntos . $b2 . "</td>
<td>" . $b1 . $vprome . $b2 . "</td>
<td>" . $b1 . $vdias . $b2 . "</td>
<td>" . $b1 . $i . " min." . "</td>
</tr>
<tr>
<td>" . $b1 . $vsocio . $b2 . "</td>
<td>" . $b1 . $vzona . $b2 . "</td>
<td>" . $b1 . substr($vnombre . ", " . $vapellido,0,30) . $b2 . "</td>
<td>" . $b1 . substr($vnivel, 0, 3) . $b2 . "</td>
<td>" . $b1 . $vpuntos . $b2 . "</td>
<td>" . $b1 . $vprome . $b2 . "</td>
<td>" . $b1 . $vdias . $b2 . "</td>
<td>" . $b1 . $i . " min." . "</td>
</tr>
</tbody>
</table>
</div>
El archivo principal es un php, pero mis dudas son por el css que utilizo y no termino de comprender.