¿Cómo puedo limitar el ancho de la columna de la tabla?

Una de las columnas en mi tabla puede contener un texto largo sin espacios en blanco. ¿Cómo puedo limitar su ancho a, digamos, 150px? No quiero que sea 150px siempre (si está vacío, debe ser estrecho), pero si hay un texto largo, quiero que esté limitado con 150px y el texto que se va a envolver.¿Cómo puedo limitar el ancho de la columna de la tabla?

Aquí hay un ejemplo de prueba: http://jsfiddle.net/Kh378/ (limitemos la tercera columna).

Gracias de antemano.

Actualización:
establecer este estilos:

word-wrap: break-word; 
max-width: 150px;

no funciona en IE8 (probado en diferentes equipos) y supongo que no funciona en cualquier versión de IE.

Fuente

2011-09-14 nightcoder

Como esta pregunta tiene casi tres años y actualmente no tiene una recompensa, me preguntaba si todavía necesita una respuesta. –

@Frank Conijn, sí, lo hace! :) – nightcoder

Eso 2 años después responde – Developer

Updated

En td y th etiquetas de la tabla I añadido:

word-wrap: break-word; 
max-width: 150px;

No es totalmente compatible en todos los navegadores, pero un comienzo.

Fuente

2011-09-14 03:01:26 Brandon

Desafortunadamente, no funciona en IE8 (y supongo que no funciona en ninguna versión de IE ... .). – nightcoder

Usted debe ser capaz de estilo de su columna con:

max-width: 150px; 
word-wrap: break-word;

Tenga en cuenta que word-wrap se apoya en IE 5.5 o superior, Firefox 3.5 +, y los navegadores WebKit (Chrome y Safari).

Fuente

2011-09-14 03:03:11 isNaN1247

Vea esto con más detalle, especialmente el ancho máximo y (actualmente) los problemas allí, en la solución similar/equivalente esta página http://stackoverflow.com/a/24620364/2255628 –

La pregunta fue respondida en another StackOverflow thread. En resumen, debería usar ancho en lugar de ancho máximo.

Fuente

2014-12-30 00:08:03

No funciona para mí. ¿Podrías preparar un jsfiddle? – nightcoder

Necesita usar ancho en su lugar.

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th>     
      <th style="width: 150px;"></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

Pero solo en la sección <thead>.

Fuente

2015-08-14 21:09:12

hay una opción para simular max-width:

simulateMaxWidth: function() { 
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell 
    this.$el.find('th').each(function(ind, th) { 
     var el = $(th); 
     var maxWidth = el.attr('max-width'); 
     if (maxWidth && el.width() > maxWidth) { 
      el.css('width', maxWidth + 'px'); 
     } 
    }); 
}

esta función puede ser llamada en $ (ventana) .en ('redimensionar', ...) varias veces

this.$el

representa elemento padre, en mi caso tengo marioneta

para aquellos º elementos que deben tener como máximo de ancho, debe ser un atributo de ancho máximo como:

<th max-width="120">

Fuente

2016-06-28 10:12:59 user2846569

1) Especifique el ancho para cada columna en <th> de acuerdo a su necesidad.

2) Agregue el ajuste de palabras para cada <td> en <tr> del <table>.

word-wrap: break-word;

Fuente

2017-05-09 11:43:54

Después de algunos experimentos en Chrome que llegó a la siguiente:

si la tabla tiene un <th> que debe tener ya sea un "ancho" o un "-anchura máxima" conjunto
la <td> 's debe haber establecido un "ancho máximo" y "ajuste de palabra: palabra de ruptura";

Si utiliza un "ancho" en el <th> se usará su valor. Si utiliza un "ancho máximo" en el <th>, se utiliza el valor "max-width" de <td>.

Esta funcionalidad es bastante compleja. Y ni siquiera estudié tablas sin encabezados o sin cadenas largas que necesitan una "palabra clave".

Fuente

2017-10-10 18:34:25 user2587656

Es muy fácil

Se podría añadir atributos como estos

ancho máximo

max-height

Pueden ser fijados en html como un atributo o en CSS como un estilo

Fuente

2017-10-11 08:07:22 Kano

¿Cómo puedo limitar el ancho de la columna de la tabla?

Respuesta

Cuestiones relacionadas