html - insertar - tabla responsive bootstrap
¿Cómo hago que una tabla HTML tenga el mismo ancho que su etiqueta div? (13)
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 algún margen, la tabla termina más ancha que el div en el que se encuentra.
Necesito soportar IE6 e IE7 (ya que esta es una aplicación interna), ¡aunque obviamente me gustaría tener una solución totalmente entre navegadores 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 el margen izquierdo en cada div, esto crea un bonito efecto ''anidado'').
¿Tal vez este artículo extenso sobre Internet Explorer y el modelo de caja de CSS ayuden?
En el caso en el que genere automáticamente código que pueda tener márgenes, agregar un elemento <div> simple y sin estilo que envuelva su tabla puede ser el truco.
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 la propiedad de tamaño de caja
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 su mesa, entonces probablemente esté en el 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 elemento principal se ampliará para acomodarse, puede detener esto agregando overflow: oculto a su CSS para el elemento principal, pero en el proceso podría oscurecer parte del contenido del elemento hijo.
Siempre he usado <table width="100%">
prueba esto:
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
al configurar 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.
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>
Por cierto, ¿hay una buena razón para que no uses el doctype estricto? estricto siempre debe ser el predeterminado. transitional solo está pensado para código heredado.
Descubrí el corazón 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: colapso 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 del usuario, tal vez en absoluto.
Para aclarar qué está pasando, intente esto: ponga el ejemplo de Nate al lado del 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 mesa de Nate y ahora también se rompe.
¡Es el colapso del borde lo que está causando!
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 compilar (simplemente mueva la parte de estilo al encabezado o a un archivo .css separado), tal vez la forma en que usa poner el CSS en línea (usando la etiqueta de estilo) tenga 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. Establecí bordes rojos y azules para ver dónde se expanden las áreas para una verificación más visual.
desbordamiento: automático; 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.
Lo siguiente me funciona en Firefox e IE7 ... una pauta, sin embargo: si configuras el ancho en un elemento, no establezcas 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>
Vea aquí para un ejemplo.
Agregue el siguiente CSS a su <table> :
table-layout: fixed;
width: 100%;