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

89

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.

maldición de datos
fuente
1
Duplicado de stackoverflow.com/q/4457506/1190388
hjpotter92

Respuestas:

178

Especifique el ancho de la mesa:

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

Ver jsFiddle

Arie Xiao
fuente
2
Recorta el contenido
Vikash
7
¡Asombroso! también funciona perfecto con table-layout: fixed; width: 100%;.
Lucas Reppe Welander
22

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.

Drew Anderson
fuente
2
Esto, combinado con la respuesta de Arie Shaw, me consiguió el comportamiento que estaba buscando. La columna tiene siempre el mismo ancho independientemente del texto y envuelve el texto incluso si no hay espacios.
Datadamnation
Estoy buscando algo como esto, sin embargo, esto parece no funcionar si la tabla no está configurada en table-layout: fixed. Sin embargo, el diseño de la tabla fijo no es CSS estilo si la cabecera de la tabla tiene un colspan. ¿Cómo se hace el ajuste de palabras en una tabla? stackoverflow.com/questions/42371945/…
Manuel
13

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

Kelly Johnson
fuente
1
w3school dice que no es compatible con html5
v.oddou
El widthatributo está obsoleto, puede usar la widthpropiedad CSS o la forma HTML 5 recomendada de establecer el ancho de la columna, el uso <colgroup>y los <col>elementos justo después de la <table>etiqueta y antes de cualquiera <thead>, <tbody>o <tr>elementos.
S. Esteves
9

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; }
John Fisher
fuente
3

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 ...

Stefan Brendle
fuente
0

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

Alex
fuente
y ancho: 50px; si realmente quieres tener un ancho fijo.
Adrian P.
0

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.

PfunnyGuy
fuente
-1

Esto funciona para mi

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