¿Cómo hago que una tabla HTML tenga el mismo ancho que su etiqueta div?
Tengo una mesa dentro de un div. Quiero que la tabla ocupe todo el ancho de la etiqueta div.
En el CSS, he establecido el ancho de la tabla al 100%. Desafortunadamente, cuando el div tiene un margen, la tabla termina más ancha que el div en el que se encuentra.
Necesito admitir IE6 e IE7 (ya que esta es una aplicación interna), ¡aunque obviamente me gustaría una 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: Desafortunadamente no puedo codificar el ancho ya que estoy generando dinámicamente el HTML e incluye anidar los divs recursivamente uno dentro del otro (con margen izquierdo en cada div, esto crea un Nice ' efecto anidado).
Agregue el siguiente CSS a su <table>:
table-layout: fixed;
width: 100%;
Sin embargo, lo siguiente funciona para mí en Firefox e IE7 ... una pauta es: si establece el ancho en un elemento, no establezca el margen o el relleno en el mismo elemento. Esto es cierto especialmente si está mezclando unidades, por ejemplo, mezclando 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>
Ver aquí para un ejemplo.
Los anchos basados en porcentajes son relativos al primer elemento padre 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 padre tiene un ancho establecido y el margen todavía afecta 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 forma predeterminada, si su contenido es más ancho que su padre, el padre se estirará para acomodarlo, puede detener esto agregando overflow: hidden a su css para el elemento padre pero en el proceso puede oscurecer parte del contenido del elemento hijo.
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 div .container no afecta la tabla. ¿Quizás hay algo más en tu marcado/CSS que afecta 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>
Descubrí el corazón del problema aquí. Tiene que ver con border-collapse. He tenido este mismo problema por un tiempo ahora. Como las tablas a menudo tienen bordes delgados, el problema no es obvio para la mayoría de las personas. Si coloca una tabla normal con un ancho establecido al 100% dentro de un div, como lo ha hecho Nate, estará 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 porque solo puede dividirse en un píxel, o dependiendo del contexto en el que se encuentre y el agente de usuario, tal vez en absoluto.
Para aclarar lo que está sucediendo, 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 en línea TD de Nate a border: 40px solid blue. Cambie el estilo td de la tabla de David a border: 40px solid #999;. En este punto, la mesa de David se separa del div en un 50% de su borde en cada lado. Nate todavía funciona. Ponga un estilo border-collapse:collapse en la mesa de Nate y sus descansos ahora también.
¡Es el border-collapse lo que lo está causando!
En el caso de que esté generando automáticamente código que puede tener márgenes, agregar un elemento <div> simple y sin estilo que envuelva su tabla podría ser el truco.
Siempre he usado <table width="100%">
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>
Intente copiar y pegar y construir sobre él (solo mueva la parte de estilo al encabezado o a un archivo .css separado), tal vez la forma en que usa poner 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.
PD Configuré bordes rojos y azules para ver dónde se expanden las áreas para una verificación más visual.
Tal vez este extenso artículo sobre Internet Explorer y el modelo de caja CSS ¿ayudará?
Ese es el gran problema con la forma en que CSS trata la propiedad de ancho y la razón por la cual Microsoft implementó el modelo de caja de manera diferente al principio. Microsoft perdió, y ahora es ancho o margen/relleno/borde para un elemento.
La situación puede cambiar a mejor en CSS3 con propiedad de tamaño de cuadro
desbordamiento: 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 deseas o no ocupa todo el tamaño de los divs dentro de él.
prueba esto:
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
al establecer el relleno del div en cero, eliminará el espacio entre los bordes del div y el contenido del mismo. 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.
Por cierto, ¿hay una buena razón para que no uses el estricto doctype? estricto siempre debe ser el valor predeterminado. transicional solo está destinado a código heredado.