La fuerza de la tabla de columnas de ancho fijo se expande en el contenedor

Aparentemente es un problema clásico, pero las "soluciones" que he encontrado no han funcionado, incluidas varias otras preguntas sobre SO.La fuerza de la tabla de columnas de ancho fijo se expande en el contenedor

Si mi tabla es más ancha que su contenedor, quiero que el ancho de la celda de la tabla permanezca fijo y no cambie de tamaño para que se ajuste al contenedor.

HTML reproducible (s <td> generadas con PHP):

<html> 
    <head></head> 

    <body> 
    <table> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { 
      echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
     } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 
</html>

Lo que he intentado:

table-layout:fixed
span recipiente con display:inline-block conjunto
div recipiente con el bloque en línea

Parece que debería haber una manera fácil de hacer que el código anterior genere una tabla que desborda el cuerpo.

¿Alguien puede ayudar?

Edición

Puede que no sea claro en mi anterior redacción, pero yo quiero para especificar la columna Ancho de mí mismo.

Estoy tratando de hacer esto sin especificar un ancho explícito para la tabla. Solo los TDs forzarán la mesa más ancha, lo que (¿debería?) Forzar el contenedor más ancho.

Además, el CSS en línea está allí solo para fines de ejemplo.

Fuente

2011-09-14 Ben

table-layout: fixed resolverá el problema. Elimine el estilo en línea que le da al td. Estás especificando un ancho Cuando no especifica el ancho para el td, los tds se redimensionan de acuerdo con el contenido y al dar el diseño de tabla fijo no cambiará el tamaño para ajustarse al contenido – Bala

@Bala - ver edición. Quiero que ''s sea un ancho establecido. Si no configuro el ancho en '' s, entonces el problema se anula. – Ben

Puede compartir el código HTML generado o dejarme saber si está disponible en línea para verificar. – Bala

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<div style="margin: 0pt auto; width: 980px;"> 
    <div style="500px;overflow:scroll"> 
    <table style="width: 100%; table-layout: fixed;"> 
     <tbody> 
     <tr> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
     </tr> 
     </tbody> 
    </table> 
    <div style="background:chartreuse;width:150px">This is 150px wide.</div> 
    </div> 
</div> 
</body> 
</html>

Fuente

2011-09-14 02:02:07 Bala

BAM allí fue gracias. Sabía que había una solución fácil: p Me faltaba 'width: 100%'. ¡Aclamaciones! Mi código reproducible está debajo, con el CSS correcto. – Ben

Usando mi HTML en mi pregunta, aquí está el marcado correcto, elogios de @Bala.

<html> 

    <head></head> 

    <body> 
    <table style='table-layout:fixed;width:100%'> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 

</html>

Fuente

2011-09-14 03:23:21 Ben

La fuerza de la tabla de columnas de ancho fijo se expande en el contenedor

Respuesta

Cuestiones relacionadas