1

Actual mente tengo 1 tabla(html) con 2 tablas(html) dentro cuyo problema es que al visualisarse en una pantalla chica se desajustan los encabezados con la tabla
Mi tabla (ejemplo) :

<table width="100%" >

 <tr>
   <table width="100%" >
     <tr>
<th width='25%'>nombre0</th>
<th width='25%'>nombre1</th>
<th width='25%'>nombre2</th>
<th width='25%'>nombre3</th>
     </tr>
   </table>
 </tr>

<tr>
  <td>
     <table width="100%" >
  <tr>
<td width='25%'>0</td>
<td width='25%'>1</td>
<td width='25%'>2</td>
<td width='25%'>3</td>
   </tr>
     </table> 
  </td>
</tr>

</table>

En este caso al verse en una pantalla mas chica el 1, 2, terminan bajo nombre0 me gustaria que en este caso sin dejar de usar ambas tablas dentro de la tabla principal poder hacer que no se desajusten los encabezados y estos sigan a las columan

3
  • 1
    Cuál es la idea de construir tablas anidadas? Entendiendo mejor lo que quieres realizar te podemos orientar =) Commented el 7 ago. 2018 a las 17:45
  • bueno es un caso donde la tablaA contiene tabla1 y tabla2 la intencion de la tabla 1 es mostrar los encavesados fijos al tope todo el tiempo , mientras que la tabla2 muestra mediante PHP y SQL la lista de registros , la tabla2 tiene el scroll para bajar y ver usuarios varios (esto tiene campos editable) pero lo unico que hace falta es ajustar ambas tablas para que pueda relacionarse el titulo con la columna
    – claus
    Commented el 7 ago. 2018 a las 17:49
  • 1
    Pero para lo que quieres realizar no necesitas crear tantas tablas.. sólo especificarle los encabezados en el thead, llenas cada columna en tbody y puedes fijar dichos encabezados con css... te dejo un link stackoverflow.com/questions/21168521/… Commented el 7 ago. 2018 a las 17:52

5 respuestas 5

2

Al código que compartes le hace falta las etiquetas TD a la primera columna.

<table width="100%">
    <tr>
            <td  width="50%">
            <table width="100%" >
                    <tr>
                        <th width='25%'>nombre0</th>
                        <th width='25%'>nombre1</th>
                        <th width='25%'>nombre2</th>
                        <th width='25%'>nombre3</th>
                    </tr>
            </table>
        </td>
        </tr>
    <tr>
        <td  width="50%">
                <table width="100%" >
                    <tr>
                        <td width='25%'>0</td>
                        <td width='25%'>1</td>
                        <td width='25%'>2</td>
                        <td width='25%'>3</td>
                </tr>
                </table> 
        </td>
    </tr>
</table>
2
  • Hola gracias, ya lo cheque y hacia falta pero el resultado es el mismo :( se siguien amontonando los campos de el encabezado y las columnas (me falto comentar que mi tabla original tiene 327 columnas )
    – claus
    Commented el 7 ago. 2018 a las 18:49
  • 1
    Hola claus puedes subir una imajen de tu tabla para ayudarte mejor :)
    – F.nando
    Commented el 7 ago. 2018 a las 19:10
1

Podrías usar la propiedad min-width para que cada th y td tengan como mínimo una anchura por lo que impedirías que se vean de forma desordenada, aquí tienes tu ejemplo poniéndole un min-width de 70px, también le he añadido un borde para que se vea mejor el ejemplo:

td, th {
  min-width:70px;
  border:1px solid black;
  }
<table width="100%" >

 <tr>
   <table width="100%" >
     <tr>
<th width='25%'>nombre0</th>
<th width='25%'>nombre1</th>
<th width='25%'>nombre2</th>
<th width='25%'>nombre3</th>
     </tr>
   </table>
 </tr>

<tr>
  <td>
     <table width="100%" >
  <tr>
<td width='25%'>0</td>
<td width='25%'>1</td>
<td width='25%'>2</td>
<td width='25%'>3</td>
   </tr>
     </table> 
  </td>
</tr>

</table>

3
  • hola , gracias. una duda las etiquetas correctas del min-width son <script></script> ? creo que lo estoy haciendo mal
    – claus
    Commented el 7 ago. 2018 a las 19:00
  • 1
    <script> es para añadir funcionalidades con js principalmente, min-width se usa en css, y en tu caso como se ve en el ejemplo que he puesto lo usas en las etiquetas th y td para solucionar tu problema. Espero que te sirva de ayuda. Commented el 8 ago. 2018 a las 21:19
  • si ya hice las pruebas muchas gracias , ya esta solucionado :)
    – claus
    Commented el 9 ago. 2018 a las 14:34
1

El problemas es que no lo estas poniendo en una columna a la tabla 2, debes ponerlo dentro de la etiqueta <td> al igual que la tabla 3. espero te ayude

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h2>HTML Table</h2>
<table width="100%">
  <tr>
    <td>
     <table width="100%" border="1" bgcolor="red" >
       <tr>
        <th width='25%'>nombre0</th>
        <th width='25%'>nombre1</th>
        <th width='25%'>nombre2</th>
        <th width='25%'>nombre3</th>
       </tr>
     </table>
   <td>
  </tr>
  <tr>
    <td>
     <table width="100%" border="1" bgcolor="yellow">
      <tr>
        <td width='25%'>0</td>
        <td width='25%'>1</td>
        <td width='25%'>2</td>
        <td width='25%'>3</td>
      </tr>
     </table>
    </td>
  </tr>
</table>
</body>
</html>

4
  • hola, ya lo cheque y es verdad me hacia falta el td, lo cual ya aregle pero sigue agrupando mal los encabezados cuando disminulle el tamaño de la pagina :(
    – claus
    Commented el 7 ago. 2018 a las 18:57
  • 1
    Claus una pregunta, si quieres que los encabezados esten alineados con las columnas de la tablas siguientes por que no hacer solo una tabla?
    – F.nando
    Commented el 7 ago. 2018 a las 19:16
  • a es que parte de los requerimientos son que los encabezados sean fijos pero que se pueda desplazar la tabla es decir si veo al usuario 346 pueda seguir referenciando que sus campos pertenecen al nombre numero de empleado y numero de ruta ect (yo habria preferido un filtro pero... que puedo decir)
    – claus
    Commented el 7 ago. 2018 a las 19:21
  • 1
    Ok, puedes subir una imagen de tu tabla para ayudarte mejor
    – F.nando
    Commented el 7 ago. 2018 a las 19:29
1

Adjunto un codigo de ejemplo... me indicas si es lo que necesitas

table {
  width: 100%;
}

thead,
tbody,
tr,
td,
th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

thead th {
  height: 30px;
  /*text-align: left;*/
}

tbody {
  height: 80px;
  overflow-y: auto;
}

thead {
  /* fallback */
}

tbody td,
thead th {
  width: 50%;
  float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Columna 1</th>
        <th>Columns 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Dato 1</td>
        <td>Dato 2</td>
      </tr>
      <tr>
        <td>Dato 3</td>
        <td>Dato 4</td>
      </tr>
      <tr>
        <td>Dato 5</td>
        <td>Dato 6</td>
      </tr>
      <tr>
        <td>Dato 7</td>
        <td>Dato 8</td>
      </tr>
    </tbody>
  </table>
</div>

6
  • lo estoy probando se ve muy bien, me estoy tardando un poco ya que my tabla real tiene 327 columnas y cada ejemplo anterior y este me tarda un poco (uff...)
    – claus
    Commented el 7 ago. 2018 a las 18:26
  • 1
    como estas implementando todo eso? javascript? angular? Commented el 7 ago. 2018 a las 19:30
  • la intencion es que sea una aplicacion hybrida pero se esta implementando en laravel(el frame que se a estado usando) y en otro frame al mismo tiempo codeiginter ...la verdad es que ya estoy exausto X_x
    – claus
    Commented el 7 ago. 2018 a las 21:40
  • 1
    Porque mostrar 327 columnas en un table no es para nada optimo... de hecho no sé que tipo de información necesitas para tener que mostrar tal cantidad... se me había ocurrido que podrías mostrar una cantidad mas acotada, por ejemplo 10 columnas y el resto dejarla en una exportacion a excel o mostrandola en un modal (esto ultimo tampoco me convence mucho si son tantas columnas) Commented el 7 ago. 2018 a las 21:46
  • peor aun, cada fila cuenta con campos para editar valores (almenos 5 columnas) lo que es una imprudencia ya que todos se actualizan con un boton al mismo tiempo es decir que al hacer el update genera 327 x 5 updates al mismo tiempo en la mayoria de los casos para solo editar 1 o 10 cuanto maximo (si asumimos que mas de 1 usuario hara esto al mismo tiempo....) son cosas que e sugerido ...yo lo llamo desarrollo ético donde uno adicional a la pregunta "puede hacerse" se pregunta "si debería hacerse" esto arrastra una cantidad enorme de malas ideas la verdad
    – claus
    Commented el 7 ago. 2018 a las 21:54
1

de antemano agradesco mucho el apoyo a quienes comentaron y propusieron respuestas, fue de gran ayuda
al final logre el proposito de que el encabezado y las filas esten ajustadas para que se pueda ver a cual pertenence a cual cuando la tabla inferior use el scroll para ver mas registros
este ejemplo tiene 13 campos y los nombres dentro de la fila son de distinto grosor para comprobar el resultado, disculpen si es algo extenso :

    <table >
      <tr>
        <td>
         <table >
          <tr>
            <td style="min-width:120px" style="white-space:nowrap;">Dato uno uno</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos dos</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos tres</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos cuatro</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos cinco</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos dseis</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos siete</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos ocho</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos nueve</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos diez</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos once</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos doce</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato dos trece</td>
          </tr>
         </table>
       <td>
      </tr>
      <tr>
        <td>
         <table >
          <tr>
            <td style="min-width:120px" style="white-space:nowrap;"> 1</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 2</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 3</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 4</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 5</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 6</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 7</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 8</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 9</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 10</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 11</td>
            <td style="min-width:120px" style="white-space:nowrap;">Dato 12</td>
            <td style="min-width:120px" style="white-space:nowrap;"> 13</td>
          </tr>
          <tr>
            <t

d style="min-width:120px" style="white-space:nowrap;">Dato 1</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 2</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 3</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 4</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 5</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 6</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 7</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 8</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 9</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 10</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 11</td>
        <td style="min-width:120px" style="white-space:nowrap;"> 12</td>
        <td style="min-width:120px" style="white-space:nowrap;">Dato 13</td>
      </tr>      
     </table>
    </td>
  </tr>
</table>

espero que esto le ayude a alguien en el futuro

2
  • 1
    Colega, insisto en que es innecesario crear tantas tablas para realizar lo que quieres.. planteate mejorar la estructura! Commented el 8 ago. 2018 a las 17:15
  • la verdad yo estoy aun mas encontrar de esto más aun porque la tabla original tiene campos para editar información y ..bueno una serie de malas prácticas, este es de esos casos de desarrollo ETICO donde dejamos de preguntar "si podemos" y "nos preguntamos si deberíamos" , este caso en especial fue impuesto a regañadientes por mi jefe adjunto en este mensaje que si alguien trabaja sobre la misma idea sugiera mejores soluciones (a mi me enoja mucho trabajar así)
    – claus
    Commented el 8 ago. 2018 a las 17:23

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.