¿Cómo hago que una tabla HTML tenga el mismo ancho que su etiqueta div?

Tengo una tabla dentro de un div. Quiero que la tabla ocupe todo el ancho de la etiqueta div.¿Cómo hago que una tabla HTML tenga el mismo ancho que su etiqueta div?

En el CSS, he establecido el ancho de la tabla al 100%. Desafortunadamente, cuando el div tiene algún margen, la tabla termina más ancha que el div.

Necesito soportar IE6 e IE7 (ya que esta es una aplicación interna), aunque obviamente me gustaría tener un ¡solución de navegador cruzado si es posible!

estoy usando el siguiente DOCTYPE ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Editar: Por desgracia no puedo código el ancho que estoy generar dinámicamente el código HTML e incluye anidación los divs recursivamente uno dentro del otro (con el margen izquierdo en cada div, esto crea un bonito efecto 'anidado').

Fuente

2008-09-16 Chris Roberts

Lo siguiente me funciona en Firefox e IE7 ... una guía, sin embargo: si establece ancho en un elemento, no establezca el margen o relleno en el mismo elemento. Esto es cierto especialmente si está mezclando unidades, por ejemplo, mezcla de porcentajes y píxeles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div style="width: 500px; background-color:#F33;"> 
     This is the outer div 
     <div style="background-color: #FAA; padding: 10px; margin:10px;"> 
     This is the inner div 
     <table cellpadding="0" cellspacing="0" style="width: 100%"> 
      <tr> 
      <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

Consulte here para ver un ejemplo.

Fuente

2008-09-16 17:18:24 Nate

Después de decir no establecer la anchura y el margen en el mismo elemento, a hacer exactamente eso por tu ejemplo div. Solo curiosidad por qué? – Kane

Tienes razón. No recuerdo! ¿Tal vez quería seguir el marcado que pensé que usaba OP? Voy a editar – Nate

En el caso en que genere código automáticamente que pueda tener márgenes, agregar un elemento <div> simple y sin estilo que envuelva su tabla puede ser el truco.

Fuente

2008-09-16 17:26:59 Nate

Ese es el gran problema con la forma en que CSS trata la propiedad de ancho y la razón por la que Microsoft implementó el modelo de caja de manera diferente al principio. Microsoft perdió, y ahora es ancho o margen/relleno/borde para un elemento.

situación puede cambiar a mejor en CSS3 con box-sizing property

Fuente

2008-09-16 17:39:19

Siempre he usado <table width="100%">

Fuente

2008-09-16 17:57:17

Derecha. Es fácil. Simplemente use CSS como '# my-parent-div table {margin: 100%;}' –

Tal vez este extenso artículo sobre Internet Explorer and the CSS box model ayudará?

Fuente

2008-09-16 18:18:17

probar esto:

div { 
padding: 0px; 
} 

table { 
    width: 100%; 
    margin: 0px; 
}

estableciendo el relleno de la div a cero, se quitará el espacio entre los bordes de la div y el contenido de la misma. al establecer el ancho de la tabla al 100% y su margen a cero, eliminará el espacio entre los bordes de la tabla y su contenedor.

Fuente

2008-09-16 19:53:57 farzad

Los anchos basados en porcentajes son relativos al primer elemento principal que tiene un ancho especificado. Si su div no tiene un ancho especificado, entonces el ancho de la tabla no tiene nada que ver con eso. ¿Puedes publicar una versión simplificada del marcado que muestre cómo se ve tu árbol DOM?

Desde otro ángulo, si su div principal tiene un ancho establecido y el margen sigue afectando a su tabla, entonces probablemente esté en modo peculiar. Ha especificado su DOCTYPE, pero tenga en cuenta que el elemento DOCTYPE DEBE ser la primera línea del archivo.Algo más a tener en cuenta cuando se trata de IE6, de manera predeterminada, si su contenido es más ancho que el de sus padres, el padre se ampliará para acomodar, puede detener esto agregando desbordamiento: oculto a su CSS para el elemento principal pero en el proceso que podría oscurecer parte del contenido del elemento hijo.

Fuente

2008-09-16 20:17:52

No estoy seguro de cuál es el problema aquí, esto funciona bien en IE6/7 y FF3. Establecer el ancho del elemento .Container DIV establece el ancho de la tabla. Agregar márgenes al .container div no afecta la tabla. ¿Tal vez haya algo más en su marcado/CSS que esté afectando el diseño?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
    <head> 
     <title>Boxes and Tables</title> 
     <style type="text/css"> 

     div.container { 
      background-color: yellow; 
      border: 1px solid #000; 
      width: 500px; 
      margin: 5px auto; 
     } 

     table.contained { 
      width: 100%; 
      border-collapse: collapse; 
     } 

     table td { 
      border: 2px solid #999; 
     } 

     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <table class="contained"> 
       <thead> 
        <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr> 
       </thead> 
       <tbody> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

Fuente

2008-09-17 15:44:14

Por cierto, ¿hay una buena razón para que usted no use el doctype estricto? estricto siempre debe ser el predeterminado. transitional solo está pensado para código heredado.

Fuente

2008-09-17 15:48:06

Descubrí el meollo del problema aquí. Tiene que ver con el colapso de fronteras. He tenido el mismo problema desde hace un tiempo. Como las tablas a menudo tienen bordes finos, el problema no es obvio para la mayoría de las personas. Si pones una mesa regular con un ancho establecido en 100% dentro de un div, como lo hizo Nate, estarás bien.

Sin embargo, si especifica border-collapse: collapse en la tabla, la tabla saldrá del div. Esto no es obvio para la mayoría de las personas, ya que solo puede dividirse en un píxel, o según el contexto en el que se encuentre y el agente de usuario, tal vez en absoluto.

Para aclarar lo que está pasando, intente esto: Coloque el ejemplo de Nate junto al ejemplo de David Heggie en un archivo html.

Parecerá que ambos funcionan bien. Pero ahora, cambie el estilo TD en línea de Nate a "borde: azul sólido de 40 píxeles". Cambia el estilo td de la tabla de David a "border: 40px solid # 999;". En este punto, la mesa de David sale del div en un 50% de su frontera en cada lado. Nate todavía funciona. Poner un colapso de borde: estilo de colapso en la tabla de Nate y ahora también se rompe.

¡Es el colapso de borde que lo está causando!

Fuente

2009-03-16 14:53:25 Chris

El siguiente código funciona en IE6/8, Chrome, Firefox, Safari:

<style type="text/css"> 
    div.container 
    { 
     width: 500px; 
     padding: 10px; 
     margin: 10px; 
     border: 1px solid red; 
    } 
    table.contained 
    { 
     width: 100%; 
     border: 1px solid blue; 
    } 
</style> 

<div class="container"> 
    <table class="contained"> 
    <tr> 
     <td>Hello</td><td>World</td> 
    </tr> 
    </table> 
</div>

copia Trate de pegar y construir en él (basta con mover la parte de estilo a la cabecera o en un archivo .css independiente), tal vez la forma en que usas para poner el CSS en línea (usando la etiqueta de estilo) tiene algo que ver con el problema, o es algún otro CSS que rodea los bloques de la tabla div. Flotar también puede causar problemas.

P.S. Establecí bordes rojos y azules para ver dónde se expanden las áreas para una verificación más visual.

Fuente

2010-10-11 16:36:16 Nestor

overflow: auto; en el div más externo puede ayudar si estás viendo cosas extrañas, como que el div más externo es más pequeño de lo que quieres o no ocupa todo el tamaño de los divs dentro de él.

Fuente

2012-10-16 03:36:41 William

añadir CSS a continuación a su <table>:

table-layout: fixed; 
width: 100%;

Fuente

2015-02-20 05:58:56

¿Cómo hago que una tabla HTML tenga el mismo ancho que su etiqueta div?

Respuesta

Cuestiones relacionadas