¿Establecer el ancho de columna de la tabla constante independientemente de la cantidad de texto en sus celdas?

535

En mi tabla establezco el ancho de la primera celda en una columna 100px.
Sin embargo, cuando el texto en una de las celdas de esta columna es demasiado largo, el ancho de la columna es mayor que 100px. ¿Cómo podría deshabilitar esta expansión?

Misha Moroshko
fuente
2
En mi caso, no ocurrió la expansión, sino todo lo contrario: reducción de ancho no deseada a pesar de mi declaración explícita de ancho. ¡Ridículo!
Csaba Toth
La única solución correcta para esto es usar colgroup con cols y establecer el ancho de cols.
MightyPork
table-layout:fixed;es la solución
emfi

Respuestas:

607

Jugué un poco con él porque tuve problemas para resolverlo.

Debe establecer el ancho de la celda (ya sea tho tdtrabajado, configuré ambos) Y establecer el table-layouta fixed. Por alguna razón, el ancho de la celda parece permanecer fijo si el ancho de la tabla también está configurado (creo que es una tontería, pero de todas formas).

Además, es útil establecer la overflowpropiedad hiddenpara evitar que salga texto adicional de la tabla.

También debe asegurarse de dejar todos los bordes y tamaños para CSS.

Ok, entonces esto es lo que tengo:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Aquí está en JSFiddle

Este tipo tenía un problema similar: anchos de celda de tabla : ancho de fijación, ajuste / truncamiento de palabras largas

ptpaterson
fuente
77
Es importante tener en cuenta esto: "El navegador establecerá los anchos de columna en función del ancho de las celdas en la primera fila de la tabla", de stackoverflow.com/questions/570154/…
daniloquio
12
Funciona cuando el ancho de la tabla no es fijo. jsfiddle.net/lavinski/CGCFW/3 Solo necesita una fila dinámica para ocupar el espacio restante.
Daniel Little
2
@DanielLittle, alternativamente, puede establecer el ancho de la tabla en 1px; con overflow: visiblepara tablas de tamaño dinámico, siempre que el tamaño de las celdas sea fijo y el desbordamiento sea visible, no importa si el tamaño de la tabla en sí es mayor o menor que las celdas reales.
Mahn
¿Qué podría hacer si su td tiene "ancho = 30%;"?
71GA
Agregue el desbordamiento: oculto @ RokoC.Buljan
Alex Grande
178

Ver: http://www.html5-tutorials.org/tables/changing-column-width/

Después de la etiqueta de la tabla, use el elemento col. No necesitas una etiqueta de cierre.

Por ejemplo, si tuviera tres columnas:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>
Hyathin
fuente
26
¡Esta! Esta es la respuesta HTML5 y funciona sin que tenga que saltar a través de estúpidos aros. Además, puede usar <col class = "someClassName"> en su lugar para mantener sus anchos en CSS y no contaminar su HTML con información de estilo.
John Munsch
2
@Sam, es posible que haya tenido algún otro problema al anular esto, como CSS, estilo en línea o doctype incorrecto, etc. Esto definitivamente funciona, es la forma estándar de establecer estilos de columna.
Sameer Alibhai
No estoy seguro si esta es la 'forma HTML5' en absoluto. Parece que colgroup / col en html5 solo se usa realmente para marcar tramos. MDN no menciona el uso del atributo de estilo en las etiquetas col (aparte de que lo hereda de los atributos globales) y solo dice de bgcolor: "... use la propiedad CSS ... en los elementos <td> relevantes". developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Stephen Panzer
55
Me funcionó con estilo de mesa table-layout: fixed; width: 100%;. ¡Gracias!
nrodic
No es definitivo / definitivo, pero w3schools tampoco menciona el uso de colesto. Sugiere el uso de CSS aplicado a un <td>(o un <th>) - w3schools.com/tags/att_td_width.asp
Don Cheadle
128

Sólo tiene que añadir <div>en el interior de la etiqueta <td>o <th>definir anchura interior <div>. Esto te ayudara. Nada más funciona.

p.ej.

<td><div style="width: 50px" >...............</div></td>
KAsun
fuente
2
Combiné esta solución con también especificar ancho mínimo / ancho máximo para el mismo ancho de píxeles solo para estar seguro. Finalmente está funcionando. No sé por qué tengo que ejecutar todas estas rondas adicionales, solo tengo que arreglarlo, ridículo ...
Csaba Toth
1
No estoy seguro de cómo es esto mejor que configurar ese mismo CSS style="width: 50px"en el<td>
Don Cheadle
2
@mmcrae Es mejor porque funciona, establecer el ancho en <td>no.
Madbreaks
66

Si necesita una o más columnas de ancho fijo, mientras que otras columnas deben cambiar de tamaño, intente establecer ambas min-widthy max-widthel mismo valor.

scrrr
fuente
Esto funcionó para mí al establecer el ancho explícitamente con table-layout: fixed;no.
Jordan Mack
Mierda! ¡Ninguna de las otras soluciones funcionó o fue demasiado torpe! Esto funcionó perfectamente! ¡No se requiere div también!
NeilRoy
29

Necesitas escribir esto dentro del CSS correspondiente

table-layout:fixed;
vinoth kumar
fuente
mejor mesa redonda con etiquetas div y luego desbordamiento de uso div: auto
vinoth kumar
Me funcionó cuando lo combiné con grupos de columnas: <table style = "table-layout: fixed"> <colgroup> <col style = "width: 50%"> <col style = "width: 50%"> </ colgroup> <tbody> ... </tbody> </table>.
Russ Bateman
Este artículo de Chris Coyer lo explica bien: css-tricks.com/fixing-tables-long-strings
cssyphus
24

Lo que hago es:

  1. Establecer el ancho de td:

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
  2. Establezca el ancho de td con CSS:

    <td style="width:200px; height:50px;">
  3. Establezca el ancho nuevamente como máximo y mínimo con CSS:

    <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Suena un poco repetitivo, pero me da el resultado deseado. Para lograr esto con mucha facilidad, es posible que necesite poner los valores CSS en una clase en su hoja de estilo:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

entonces:

<td class="td_size">

Coloque el atributo de clase a cualquiera <td>que desee.

ErickBest
fuente
Esta fue la única solución que parecía funcionar en todos los casos sin imponer restricciones adicionales, potencialmente no deseadas.
Sam
3

Yo usé esto

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}
Svetoslav Marinov
fuente
No olvide ntch-child (2) (o 3, 4 y así sucesivamente)
la tabla td nth-child (n + 1) {...} cubrirá todos menos la primera columna
Ed Randall
2

Si no desea un diseño fijo, especifique una clase para que la columna tenga el tamaño adecuado.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>
mcdado
fuente
2

También ayuda, poner en la última "celda de relleno", con ancho: auto . Esto ocupará el espacio restante y dejará todas las demás dimensiones como se especifica.

Mitja Gustin
fuente
2

Haga que la respuesta aceptada responda para pantallas pequeñas cuando sea más pequeña que el ancho fijo.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Willy Richardson
fuente
2

Configurando esto:

style="min-width:100px;" 

Trabajó para mi.

Priyanka Arora
fuente
1

KAsun tiene la idea correcta. Aquí está el código correcto ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
Aaron Averill
fuente
1

Según mi respuesta aquí , también es posible usar un encabezado de tabla (que puede estar vacío) y aplicar anchos relativos para cada celda de encabezado de tabla. El ancho de todas las celdas en el cuerpo de la tabla se ajustará al ancho de su cabeza de columna. Ejemplo:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Ver resultado

Alternativamente, use colgroupcomo se sugiere en la respuesta de Hyathin.

Eicksl
fuente
0

Uso un elemento :: after en la celda donde quiero establecer un ancho mínimo independientemente del texto presente, como este:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

No tengo que establecer el ancho en la tabla principal ni usar el diseño de tabla.

Dan Macák
fuente
-4

Encontré que la respuesta de KAsun funciona mejor usando vw en lugar de px, así:

<td><div style="width: 10vw" >...............</div></td>

Este fue el único estilo que necesitaba para ajustar el ancho de la columna

usuario3229980
fuente
-5

No es necesario configurarlo "fixed"; todo lo que necesita es configurarlo, overflow:hiddenya que el ancho de la columna está configurado.

Vladimír Hála
fuente
3
Lo que ocultará el contenido detrás de los bordes de la celda, no es una buena idea.
mystrdat