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 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.
Respuestas:
Especifique el ancho de la mesa:
table { table-layout: fixed; width: 100px; }
Ver jsFiddle
fuente
table-layout: fixed; width: 100%;
.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.
fuente
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
fuente
width
atributo está obsoleto, puede usar lawidth
propiedad 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.Puede agregar un
div
altd
, luego darle estilo. Debería funcionar como esperabas.<td><div>AAAAAAAAAAAAAAAAAAA</div></td>
Entonces el css.
td div { width: 50px; overflow: hidden; }
fuente
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 ...
fuente
Intentaría configurarlo en max-width: 50px;
fuente
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.
fuente
Esto funciona para mi
td::after { content: ''; display: block; width: 30px; }
fuente