Palabra-envolver una celda de la tabla larga, manteniendo anchos dinámicos en los demás

Question

Tengo una tabla que tiene una larga línea en una de sus células. Necesito la larga cola para ser dividido, de modo que no causa que la tabla sea más del 100% de ancho. He encontrado que mediante la adición table-layout: fixed y word-wrap: word-break, que envolverá la célula de largo. Sin embargo, un efecto secundario del uso de table-layout es que causa todas las columnas para tener la misma anchura.

Se puede ver un ejemplo de eso aquí:

http://jsfiddle.net/RYdLd/2/

¿Cómo puedo hacer de tamaño automático ancho de la primera columna para encajar sólo su contenido? (Es decir, en este ejemplo, debe ser sólo lo suficientemente amplia como para mostrar la 1 y 2 en esa columna.)

Los datos de la tabla se carga dinámicamente, por lo que una solución que codifica duros ancho de los valores no es bueno porque no hay manera de saber de antemano el ancho de una columna debe ser. Mi única opción es utilizar un <table>, no puedo utilizar un <div> o algún otro elemento.

Answer 1

According to the official specification, when you use a fixed table-layout, the first row's column widths determine the entire table's column widths. If none of them are defined, it will distribute the column widths evenly.

Since there doesn't seem to be any other option, I ended up using the following method:

1. Loading the data in the table while the table-layout is set to auto.
2. Reading the width of the columns I want to be dynamic.
3. Setting those column widths to their current values.
4. Changing the table-layout to fixed.

Here's an example which isn't perfect (the width gets decreased by a bit):

http://jsfiddle.net/RYdLd/7/

Answer 2

I discovered this while wrestling with the same problem:

Setting break-word on an element corresponds exactly to inserting a zero-width space between every character of the text contained inside that element.

Except that this actually works with normal, dynamic tables!

This solution is very fast, since it does not require any Javascript.

(It could however be used from Javascript if desired. Find all cells with break-word, grab all the child text nodes, and insert a zero-width space between every character. Even then, the script would run only once during page load, so this should still be extremely performant.)

Zero-width space is ​

Answer 3

You can use: word-wrap css style to break the long sentences.

word-wrap: break-word

Answer 4

It's easy to handle/wrap long words in DIVs and fixed tables (table-layout:fixed) - just apply CSS3 word-wrap:break-words.

Within dynamic tables above property does only half of the work. We need additionally to help the browsers find break points.

A bit more detailed explanation can be found in the article Wrap long words within dynamic tables.