I have a table inside a DIV. I am learning CSS I was studying several example codes. Basically I need to complete the table with records of 8 fields, visualizing the vertical scroll bar, and without horizontal scroll. I need to look good in desktop format, as well as in the resolution of my tablet, 1280x800, both in portrait and landscape. I achieved "almost" the functionality, but sometimes the scroll bar is separated from the table, sometimes it is not shown, sometimes the table is left unfocused. I think I'm missing some things because I do not know. Is this almost .. they help me to make it functional? Set an example with the css that I have! Thanks
file: test01.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>The main file is a php, but my doubts are for the css I use and I do not understand.