Forzar que los anchos de columna de la tabla siempre sean fijos independientemente del contenido

Tengo una tabla html con table-layout: fixedy un td con un ancho establecido. La columna aún se expande para contener el contenido del texto que no contiene un espacio. ¿Hay alguna forma de solucionar esto que no sea envolver el contenido de cada td en un div?

Ejemplo: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

En el ejemplo, puede ver que la columna con AAAAAAAAAAAA ... se expande a pesar de estar establecida explícitamente en 50px de ancho.

Especifique el ancho de la mesa:

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

Ver jsFiddle

Intente buscar en el siguiente CSS:

word-wrap:break-word;

Los navegadores web no deben dividir las "palabras" de forma predeterminada, por lo que lo que está experimentando es el comportamiento normal de un navegador. Sin embargo, puede anular esto con la directiva CSS de ajuste de palabras.

Debería establecer un ancho en la tabla general y luego un ancho en las columnas. "ancho: 100%;" también debería estar bien dependiendo de sus requisitos.

Es posible que el ajuste de texto no sea lo que desea, sin embargo, es útil para mostrar todos los datos sin deformar el diseño.

Haga la mesa sólida como una roca ANTES del css. Calcule el ancho de la tabla, luego use una fila de 'control' en la que cada td tenga un ancho explícito, todo lo cual se suma al ancho en la etiqueta de la tabla.

Tener que hacer cientos de correos electrónicos html para trabajar en todas partes, usando primero el HTML correcto, luego el estilo w / css solucionará muchos problemas en todos los IE, webkit y mozillas.

entonces:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Mantendrá una mesa de 300px de ancho. Mira imágenes que son más grandes que el ancho por extremos

Puede agregar un dival td, luego darle estilo. Debería funcionar como esperabas.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Entonces el css.

td div { width: 50px; overflow: hidden; }

También puede trabajar con "overflow: hidden" o "overflow-x: hidden" (solo para el ancho). Esto requiere un ancho definido (¿y / o alto?) Y quizás también un "display: block".

"Overflow: Hidden" oculta todo el contenido, que no cabe en el cuadro definido.

Ejemplo:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDITAR: Es una pena, lo he visto, ya usas "desbordamiento". Supongo que no funciona, porque no estableces "display: block" en tu elemento ...

Intentaría configurarlo en max-width: 50px;

También puede utilizar porcentajes y / o especificar en los encabezados de columna:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

La ventaja con los porcentajes es un menor mantenimiento del código: puede cambiar el ancho de su tabla sin tener que volver a especificar el ancho de las columnas.

Advertencia: Tengo entendido que el ancho de la tabla especificado en píxeles no es compatible con HTML 5; necesita usar CSS en su lugar.

Esto funciona para mi

td::after { 
content: ''; 
display: block; 
width: 30px;
}