Ancho de columna fijo en la tabla HTML

Question

Tengo una tabla HTML que tiene filas agregadas en un bucle de PHP. Esto es lo que el cuerpo del bucle se parece

<tr> 
    <td style="width:220px"><?php echo $a; ?></td> 
    <td style="width:150px"><?php echo $b; ?></td> 
    <td style="width:70px"><?php echo $c; ?></td> 
    <td style="width:70px"><?php echo $d; ?></td> 
</tr> 

El problema es, cuando el contenido en la segunda columna de cualquier fila son un poco grande, la anchura de la segunda columna excede de 150 píxeles, y para compensar la anchura de la primera la columna se reduce ¿Cómo puedo evitar que eso suceda? Quiero que el ancho no cambie, y si el contenido de una celda en particular es demasiado grande para caber, la altura debería aumentar para adaptarse.

Answer 1

usted debe tratar esta instrucción CSS:

td { word-wrap: break-word; } 

que funciona en muchos navegadores (sí, incluyendo IE 6, IE 5.5, incluso aunque no FX 3.0 Sólo ha reconocido por Fx3.5 + También es bueno para.. Saf, Chr y Op pero no sé la versión exacta para estos) y no hacen ningún daño en los otros.

Si el ancho de la tabla aún está en mal estado, hay también:

table { table-layout: fixed; } 
th, td { width: some_value; } 

que forzará al navegador que utilice el otro algoritmo de mesa, aquel en el que no intenta adaptar muchas situaciones, incluyendo los torpes pero adhiérase a lo que dice la hoja de estilo.

Answer 2

tratan de esta manera

<tr> 
    <td style="overflow:hidden;width:200px;"><?php echo $a; ?></td> 
    <td style="overflow:hidden;width:150px;"><?php echo $b; ?></td> 
    <td style="overflow:hidden;width:70px;" ><?php echo $c; ?></td> 
    <td style="overflow:hidden;width:70px;" ><?php echo $d; ?></td> 
</tr> 

o puede utilizar style="WORD-BREAK:BREAK-ALL; en estilo

Answer 3

<tr> 
    <td style="word-wrap:break-word;width:200px;"><?php echo $a; ?></td> 
    <td style="word-wrap:break-word;width:150px"><?php echo $b; ?></td> 
    <td style="word-wrap:break-word;width:70px"><?php echo $c; ?></td> 
    <td style="word-wrap:break-word;width:70px"><?php echo $d; ?></td> 
</tr> 

Usted puede intentar word-wrap:break-word;

información sobre la Propiedad

Esta propiedad especifica WH ether la línea renderizada actual debería romperse si el contenido excede el límite del cuadro de representación especificado para un elemento (esto es similar en cierto modo a las propiedades 'clip' y 'overflow' en el intento). Esta propiedad solo debería aplicarse si el elemento tiene una representación visual, es un elemento en línea con alto/ancho explícito, está absolutamente posicionado y/o es un elemento de bloque.

Answer 4

Solo tiene que agregar ajuste de palabras: romper la palabra propiedad de CSS.

su código debería tener este aspecto

<td style="width:150px; word-wrap: break-word"><?php echo $b; ?></td> 

Answer 5

Puede envolvió cada contenido de TDS con un div y aplicar estilos CSS desbordamiento en cada Div:

probar este ejemplo, es posible cambiar o añadir más estilos o cambian el desbordamiento:

<style> 
    div.c220{ width:220px; overflow:hidden; } 
    div.c150{ width:150px; overflow:hidden; } 
    div.c70{ width:170px; overflow:hidden; } 
</style> 
<tr> 
    <td><div class="c220"><?php echo $a; ?></div></td> 
    <td><div class="c150"><?php echo $b; ?></div></td> 
    <td><div class="c70"><?php echo $c; ?></div></td> 
    <td><div class="c70"><?php echo $d; ?></div></td> 
</tr>