0

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.

1
  • no te entendí del todo pero creo que lo que buscas es "fixed table header". búscalo así y quizás encuentres lo que necesites
    – LPZadkiel
    Commented el 23 jul. 2018 a las 18:49

2 respuestas 2

1

Te sugiero esta opción, convierte tanto el thead y tbodyen bloques y dale a cada celda un ancho minimo y maximo, que necesites.

Este efecto no se puede lograr limpiamente con CSS, ya que aún faltan propiedades que nos ayuden a hacerlo de forma comoda y facil.

Sin embargo, te invito a buscar como alguien te recomendó "fixed table header" y verás las decenas de formas de hacerlo, yo te recomiendo esta:

#contiene_tabla,
#contiene_tabla *{
  box-sizing: border-box;
}

#contiene_tabla{
  overflow: hidden;
  overflow-x: auto;
  padding-bottom: 1px;
  font-family: "Lato", sans-serif;
  position: relative;
  --n_col: 8; /*Numero de columnas*/
  --ancho_celda: 120px; /*Ancho minimo de cada celda*/
  --alto_tabla: 40vh; /*Altura relativa de la tabla*/
  --alto_tabla_max: 450px; /*Altura maxima de la tabla*/
  /*EL ANCHO DE LAS CELDAS ES EL MISMO, PERO PUEDES CAMBIARLO ABAJO*/
  --ancho_celda01: var(--ancho_celda);
  --ancho_celda02: var(--ancho_celda);
  --ancho_celda03: var(--ancho_celda);
  --ancho_celda04: var(--ancho_celda);
  --ancho_celda05: var(--ancho_celda);
  --ancho_celda06: var(--ancho_celda);
  --ancho_celda07: var(--ancho_celda);
  --ancho_celda08: var(--ancho_celda);
}

#contiene_tabla table{
  margin: auto;
  table-layout: fixed;
  border-collapse: collapse;
}

#contiene_tabla thead{
  background-color: #75F3F3;
  position: sticky;
}

#contiene_tabla td, 
#contiene_tabla th{
  width: calc(100% / var(--n_col)) !important;
  max-width: var(--ancho_celda) !important;
  min-width: var(--ancho_celda) !important;
  padding: 5px;
  font-weight: normal;
  min-width: 11vw;
  word-wrap: break-word;
  font-size: 11px;
  border: 1px solid #c4c0c9;
}

#contiene_tabla thead,
#contiene_tabla tbody{
  display: block;
}

#contiene_tabla tbody{
  height: var(--alto_tabla);
  max-height: var(--alto_tabla_max);
  overflow: auto;
}

#contiene_tabla th:nth-child(1),
#contiene_tabla td:nth-child(1){ 
  max-width: var(--ancho_celda01) !important;
  min-width: var(--ancho_celda01) !important; }
  
#contiene_tabla th:nth-child(2),
#contiene_tabla td:nth-child(2){ 
  max-width: var(--ancho_celda02) !important;
  min-width: var(--ancho_celda02) !important; }
  
#contiene_tabla th:nth-child(3),
#contiene_tabla td:nth-child(3){ 
  max-width: var(--ancho_celda03) !important;
  min-width: var(--ancho_celda03) !important; }

#contiene_tabla th:nth-child(4),
#contiene_tabla td:nth-child(4){ 
  max-width: var(--ancho_celda04) !important;
  min-width: var(--ancho_celda04) !important; }
  
#contiene_tabla th:nth-child(5),
#contiene_tabla td:nth-child(5){ 
  max-width: var(--ancho_celda05) !important;
  min-width: var(--ancho_celda05) !important; }
  
#contiene_tabla th:nth-child(6),
#contiene_tabla td:nth-child(6){ 
  max-width: var(--ancho_celda06) !important;
  min-width: var(--ancho_celda06) !important; }
  
#contiene_tabla th:nth-child(7),
#contiene_tabla td:nth-child(7){ 
  max-width: var(--ancho_celda07) !important;
  min-width: var(--ancho_celda07) !important; }
  
#contiene_tabla th:nth-child(8),
#contiene_tabla td:nth-child(8){ 
  max-width: var(--ancho_celda08) !important;
  min-width: var(--ancho_celda08) !important; }


/*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; 
    min-width: 11vw;
    word-wrap: break-word;
    font-size: 11px;
    height: 3.5vh !important;
    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%; 
    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 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"> </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>

Esta es otra variante, donde el scroll parece fuera de la tabla:

#contiene_tabla,
#contiene_tabla *{
  box-sizing: border-box;
}

#contiene_tabla{
  overflow: hidden;
  overflow-x: auto;
  padding-bottom: 1px;
  font-family: "Lato", sans-serif;
  position: relative;
  --n_col: 8; /*Numero de columnas*/
  --ancho_celda: 120px; /*Ancho minimo de cada celda*/
  --alto_tabla: 40vh; /*Altura relativa de la tabla*/
  --alto_tabla_max: 450px; /*Altura maxima de la tabla*/
  /*EL ANCHO DE LAS CELDAS ES EL MISMO, PERO PUEDES CAMBIARLO ABAJO*/
  --ancho_celda01: var(--ancho_celda);
  --ancho_celda02: var(--ancho_celda);
  --ancho_celda03: var(--ancho_celda);
  --ancho_celda04: var(--ancho_celda);
  --ancho_celda05: var(--ancho_celda);
  --ancho_celda06: var(--ancho_celda);
  --ancho_celda07: var(--ancho_celda);
  --ancho_celda08: var(--ancho_celda);
}

#contiene_tabla table{
  margin: auto;
  table-layout: fixed;
  border-collapse: collapse;
}

#contiene_tabla thead{
  position: sticky;
}
#contiene_tabla th{
  background-color: #75F3F3;
}

#contiene_tabla td, 
#contiene_tabla th{
  width: calc(100% / var(--n_col)) !important;
  max-width: var(--ancho_celda) !important;
  min-width: var(--ancho_celda) !important;
  padding: 5px;
  font-weight: normal;
  min-width: 11vw;
  word-wrap: break-word;
  font-size: 11px;
  border: 1px solid #c4c0c9;
}

#contiene_tabla thead,
#contiene_tabla tbody{
  display: block;
}

#contiene_tabla tbody{
  height: var(--alto_tabla);
  max-height: var(--alto_tabla_max);
  overflow: auto;
}

#contiene_tabla th:nth-child(1),
#contiene_tabla td:nth-child(1){ 
  max-width: var(--ancho_celda01) !important;
  min-width: var(--ancho_celda01) !important; }
  
#contiene_tabla th:nth-child(2),
#contiene_tabla td:nth-child(2){ 
  max-width: var(--ancho_celda02) !important;
  min-width: var(--ancho_celda02) !important; }
  
#contiene_tabla th:nth-child(3),
#contiene_tabla td:nth-child(3){ 
  max-width: var(--ancho_celda03) !important;
  min-width: var(--ancho_celda03) !important; }

#contiene_tabla th:nth-child(4),
#contiene_tabla td:nth-child(4){ 
  max-width: var(--ancho_celda04) !important;
  min-width: var(--ancho_celda04) !important; }
  
#contiene_tabla th:nth-child(5),
#contiene_tabla td:nth-child(5){ 
  max-width: var(--ancho_celda05) !important;
  min-width: var(--ancho_celda05) !important; }
  
#contiene_tabla th:nth-child(6),
#contiene_tabla td:nth-child(6){ 
  max-width: var(--ancho_celda06) !important;
  min-width: var(--ancho_celda06) !important; }
  
#contiene_tabla th:nth-child(7),
#contiene_tabla td:nth-child(7){ 
  max-width: var(--ancho_celda07) !important;
  min-width: var(--ancho_celda07) !important; }
  
#contiene_tabla th:nth-child(8),
#contiene_tabla td:nth-child(8){ 
  max-width: var(--ancho_celda08) !important;
  min-width: var(--ancho_celda08) !important; }


/*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; 
    min-width: 11vw;
    word-wrap: break-word;
    font-size: 11px;
    height: 3.5vh !important;
    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%; 
    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 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"> </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>

Y aca como si la ultima celda del encabezado cubriera el scroll:

#contiene_tabla,
#contiene_tabla *{
  box-sizing: border-box;
}

#contiene_tabla{
  overflow: hidden;
  overflow-x: auto;
  padding-bottom: 1px;
  font-family: "Lato", sans-serif;
  position: relative;
  --n_col: 8; /*Numero de columnas*/
  --ancho_celda: 120px; /*Ancho minimo de cada celda*/
  --alto_tabla: 40vh; /*Altura relativa de la tabla*/
  --alto_tabla_max: 450px; /*Altura maxima de la tabla*/
  /*EL ANCHO DE LAS CELDAS ES EL MISMO, PERO PUEDES CAMBIARLO ABAJO*/
  --ancho_celda01: var(--ancho_celda);
  --ancho_celda02: var(--ancho_celda);
  --ancho_celda03: var(--ancho_celda);
  --ancho_celda04: var(--ancho_celda);
  --ancho_celda05: var(--ancho_celda);
  --ancho_celda06: var(--ancho_celda);
  --ancho_celda07: var(--ancho_celda);
  --ancho_celda08: var(--ancho_celda);
}

#contiene_tabla table{
  margin: auto;
  table-layout: fixed;
  border-collapse: collapse;
}

#contiene_tabla thead{
  position: sticky;
  background-color: #75F3F3;
  box-shadow: 
    inset -1px 0 0 0 #c4c0c9, 
    inset 0 1px 0 0 #c4c0c9, 
    inset 0 -1px 0 0 #c4c0c9;
}

#contiene_tabla td, 
#contiene_tabla th{
  width: calc(100% / var(--n_col)) !important;
  max-width: var(--ancho_celda) !important;
  min-width: var(--ancho_celda) !important;
  padding: 5px;
  font-weight: normal;
  min-width: 11vw;
  word-wrap: break-word;
  font-size: 11px;
  border: 1px solid #c4c0c9;
}

#contiene_tabla th{
  border-width: 1px 0 0 1px;
}

#contiene_tabla th:last-child{
  padding-left: 16px; /*Para tratar de disimular que el texto esta al centro, es opcional ;)*/
}

#contiene_tabla thead,
#contiene_tabla tbody{
  display: block;
}

#contiene_tabla tbody{
  height: var(--alto_tabla);
  max-height: var(--alto_tabla_max);
  overflow: auto;
}

#contiene_tabla th:nth-child(1),
#contiene_tabla td:nth-child(1){ 
  max-width: var(--ancho_celda01) !important;
  min-width: var(--ancho_celda01) !important; }
  
#contiene_tabla th:nth-child(2),
#contiene_tabla td:nth-child(2){ 
  max-width: var(--ancho_celda02) !important;
  min-width: var(--ancho_celda02) !important; }
  
#contiene_tabla th:nth-child(3),
#contiene_tabla td:nth-child(3){ 
  max-width: var(--ancho_celda03) !important;
  min-width: var(--ancho_celda03) !important; }

#contiene_tabla th:nth-child(4),
#contiene_tabla td:nth-child(4){ 
  max-width: var(--ancho_celda04) !important;
  min-width: var(--ancho_celda04) !important; }
  
#contiene_tabla th:nth-child(5),
#contiene_tabla td:nth-child(5){ 
  max-width: var(--ancho_celda05) !important;
  min-width: var(--ancho_celda05) !important; }
  
#contiene_tabla th:nth-child(6),
#contiene_tabla td:nth-child(6){ 
  max-width: var(--ancho_celda06) !important;
  min-width: var(--ancho_celda06) !important; }
  
#contiene_tabla th:nth-child(7),
#contiene_tabla td:nth-child(7){ 
  max-width: var(--ancho_celda07) !important;
  min-width: var(--ancho_celda07) !important; }
  
#contiene_tabla th:nth-child(8),
#contiene_tabla td:nth-child(8){ 
  max-width: var(--ancho_celda08) !important;
  min-width: var(--ancho_celda08) !important; }


/*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; 
    min-width: 11vw;
    word-wrap: break-word;
    font-size: 11px;
    height: 3.5vh !important;
    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%; 
    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 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"> </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>

Sí es lo que buscas, agradecería mucho el voto positivo, sino, dejame tu comentario. Éxitos!

5
  • Muy bueno lo que me pasaste Edgar! si claro que va un super positivo jaja . Hice pruebas, me encantó la última celda cubriendo el scroll .. ,con algún retoque lo tendría, principalmente no sabía del funcionamiento de CALC . 2 dudas, 1. se supone que el calc aplicado al width del DIV contenedor dividiendo por las columnas hace variar el tamaño de las columnas ? Al achicar la ventana no lo recalcula . Probé con media querys pero no funcionó, calculo xq la resolución no varía ? 2. Algunas veces llamo la pagina del navegador y se pierde el scroll vertical, refresco y ahi se ve. Es normal ?
    – look68
    Commented el 27 jul. 2018 a las 13:39
  • Y podrías explicarme que significa : --alto_tabla: 40vh; /*Altura relativa de la tabla*/ , la altura relativa de la tabla ? Gracias Edgar !
    – look68
    Commented el 27 jul. 2018 a las 17:27
  • La medida 'vh' significa viewport height significa que la tabla tendrá una altura similar al 40% de la altura de la ventana del navegador en el dispositivo que se visualiza, si no quieres que sea así, simplemente coloca una medida específica como 450px. ¿Si quedo claro? Commented el 28 jul. 2018 a las 0:23
  • Calc es un backup en caso de que el navegador no reconozca las variables css, esto calcula pero dependiendo del tamaño del contenedor en este caso la fila. Ahora, no quiere decir que esa la medida que actualmente toma la tabla, sino la variable --ancho_celda: 120px, esa es la principal. Si quieres que sea de acuerdo al ancho de la ventana, tienes que cambiar ese valor, por algo así (calc( 100vw / 8)), pero recuerda que debes restar los márgenes a los lados del body y el ancho del scroll, por lo que quedaría algo así: --ancho_celda: calc((100vw - 2em - 15px) / 8) Commented el 28 jul. 2018 a las 0:37
  • Gracias Edgar !!
    – look68
    Commented el 30 jul. 2018 a las 14:29
0

hola lo que necesitas es que el scroll vertical se vea y el scroll horizontal? bueno eso te entiendo si es eso ps puedes crear un codigo css asi:

imagina que tienes este codigo html5:

.ejemplo{
width:100px; 
height:100px; 
overflow: auto;
}
<div class="ejemplo" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

tu necesitas especifica el width y height en px.

y en adiccion puedes usar overflow: auto; para evitar que se muestre la barra de desplazamiento horizontal y solo se vea verticalmente.

te sugiero leer estos post para que conozcas mas sobre este tema:

pure-css-horizontal-scrolling/ overflow

otra posible solucion es:

mira overflow-y. en CSS 3 te puede ayudar.

6
  • Hola, no amigo, tal cual lo explico no necesito el scroll horizontal, de hecho en el ejemplo no aparece.
    – look68
    Commented el 23 jul. 2018 a las 19:53
  • Necesito perfeccionar lo que pude ir haciendo, ya que por ejemplo al darle un width al div "contiene_tabla" me anula centrarlo al centro ... algun especialista en CSS que me pueda echar una mano ?
    – look68
    Commented el 23 jul. 2018 a las 19:55
  • @look68 ami si aparece y tu pregunta es lo que das a entender
    – simon
    Commented el 23 jul. 2018 a las 19:58
  • @look68 como quieres que sea vea la tabla? aclara tu pregunta
    – simon
    Commented el 23 jul. 2018 a las 20:00
  • La tabla tiene 8 columnas fijas , cargo pocos o muchos registros que se visualizan con height fijo y scroll, y quisiera que tenga la cabecera fija , y tambien esté siempre centrada horizontalmente . Aparentemente funciona , pero en algo estoy fallando ya que la barra de scroll a veces se ve alejada de la tabla
    – look68
    Commented el 23 jul. 2018 a las 20:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.