html - tamaño - Forzar anchos de columnas de la tabla para que siempre se corrijan independientemente del contenido

tabla responsive html

Question

Tengo una tabla html con table-layout: fixed y 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 manera de arreglar esto que no sea envolver los contenidos 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 explícitamente configurada a 50 px de ancho.

Answer 1

Especifique el ancho de la tabla:

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

Ver jsFiddle

Answer 2

Haz la mesa sólida como una roca ANTES de la CSS. Calcule su ancho de la tabla, luego use una fila de "control" donde cada td tiene 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 en html para trabajar en todas partes, usando primero el HTML correcto, y luego diseñar w / css resolverá muchos problemas en todos los IE, WebKit y Mozillas.

asi que:

<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

Answer 3

Intentaría configurarlo en ancho máximo: 50px;

Answer 4

Intente buscar en el siguiente CSS:

word-wrap:break-word;

Los navegadores web no deben dividir "palabras" de manera 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.

El uso de ajuste de palabras puede no ser lo que usted desea, sin embargo, es útil para mostrar todos los datos sin deformar el diseño.

Answer 5

Puede agregar un div a la td , y luego darle un estilo. Debería funcionar como esperabas.

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

Luego el css.

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

Answer 6

También puede trabajar con "overflow: hidden" o "overflow-x: hidden" (solo por el ancho). Esto requiere un ancho definido (y / o altura?) Y tal vez también un "display: block".

"Desbordamiento: oculto" oculta todo el contenido, que no encaja 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: Qué vergüenza, ya lo he visto, ya usas "desbordamiento". Supongo que no funciona, porque no configura "display: block" para su elemento ...