4

Estoy trabajando con una tabla HTML y tengo el problema de que las columnas se redimensionan segun el contenido.

Si miras las imágenes de abajo la columna CAMPO3 cambia su anchura según su texto.

La idea es que las 2 primeras columnas ocupen 30px y 50px respectivamente y que el resto del espacio se reparta equitativamente entre las demas columnas, teniendo en cuenta que aunque actualmente haya 6 podría haber 8 o 10 y debe repartirse ese tamaño entre ellas correctamente.

Aqui teneis el ejemplo del problema:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

2
  • Hola, este es el sitio de Stackoverflow en Español. Por favor traduce tu pregunta o usa la versión inglesa de Stackoverflow
    – JDev
    Commented el 7 mar. 2019 a las 11:21
  • Gracias y disculpa, ya está corregido
    – user119959
    Commented el 7 mar. 2019 a las 11:33

1 respuesta 1

1

Has probado a usar el selector child para las dos primeras columnas?

-----Edito para que las demas columnas se ajusten al ancho de la pagina que entendi mal la pregunta------ (mis dicuplas)

Primero hay que decirle a la tabla que su ancho es fijo con table-layout

 table {
  table-layout: fixed;
  width: 100%;  
 }

Luego cogemos los 2 primeros hijos td (columnas) de la tabla y les cambiamos su ancho

Ejemplo: (sin nth-child dado que en Internet explorer da problemas)

tr th:first-child {
  min-width: 30px;
} 

tr th:first-child + th {
  min-width: 50px;
}

Te adjunto el ejemplo anteriormente comentado.

.tg {
  table-layout: fixed;
  width: 100%;  
    word-wrap:break-word; 
    /*Esto lo añado extra para romper las frases y que nos e vea tan mal el titulo*/
 }
.tg td, .tg th {
     border: 1px solid black;
}

.tg tr th:first-child {
  table-layout: auto;
     width: 30px !important;
}
.tg tr th:first-child + th {
  table-layout: auto;
     width: 50px !important;
}
<table class="tg">
      <tr>
        <th class="tg-0lax">Neque porro quisquam</th>
        <th class="tg-0lax">Neque</th>
        <th class="tg-0lax">porro</th>
        <th class="tg-0lax">quisquam</th>
        <th class="tg-0lax">est</th>
        <th class="tg-0lax">qui</th>
        <th class="tg-0lax">dolorem</th>
        <th class="tg-0lax">ipsum</th>
        <th class="tg-0lax">quia</th>
        <th class="tg-0lax">dolor</th>
        <th class="tg-0lax">sit</th>
      </tr>
      <tr>
        <td class="tg-0lax">Neque</td>
        <td class="tg-0lax">porro</td>
        <td class="tg-0lax">quisquam</td>
        <td class="tg-0lax">est</td>
        <td class="tg-0lax">qui</td>
        <td class="tg-0lax">dolorem</td>
        <td class="tg-0lax">ipsum</td>
        <td class="tg-0lax">quia</td>
        <td class="tg-0lax">dolor</td>
        <td class="tg-0lax">sit</td>
        <td class="tg-0lax">amet,</td>
      </tr>
      <tr>
        <td class="tg-0lax">Neque</td>
        <td class="tg-0lax">porro</td>
        <td class="tg-0lax">quisquam</td>
        <td class="tg-0lax">est</td>
        <td class="tg-0lax">qui</td>
        <td class="tg-0lax">dolorem</td>
        <td class="tg-0lax">ipsum</td>
        <td class="tg-0lax">quia</td>
        <td class="tg-0lax">dolor</td>
        <td class="tg-0lax">sit</td>
        <td class="tg-0lax">amet,</td>
      </tr>
      <tr>
        <td class="tg-0lax">Neque</td>
        <td class="tg-0lax">porro</td>
        <td class="tg-0lax">quisquam</td>
        <td class="tg-0lax">est</td>
        <td class="tg-0lax">qui</td>
        <td class="tg-0lax">dolorem</td>
        <td class="tg-0lax">ipsum</td>
        <td class="tg-0lax">quia</td>
        <td class="tg-0lax">dolor</td>
        <td class="tg-0lax">sit</td>
        <td class="tg-0lax">amet,</td>
      </tr>
    </table>

4
  • 1
    No es necesario darle un ancho a todos los th y td de cada columna, con dárselo al th es suficiente, el resto de la columna usará ese ancho. El OP pedía que el resto de columnas tuvieran el mismo ancho y en tu solución no lo tienen
    – user7176
    Commented el 7 mar. 2019 a las 13:34
  • Lo del th es correcto, no lo tenía entendido así yo, y yo no entiendi que el OP pida que las demás columnas mantengan un tamaño fijo sino que el tamaño restante se autoajuste.
    – Arngue
    Commented el 7 mar. 2019 a las 14:15
  • 1
    Es lo que dice el título de la pregunta: Mantener misma anchura en las columnas sin importar el contenido
    – user7176
    Commented el 7 mar. 2019 a las 14:24
  • 1
    Ahora me di cuenta, ya edito
    – Arngue
    Commented el 7 mar. 2019 a las 14:34

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.