Tengo una tabla dentro del div. Si lo veo con IE9 o FF, entonces está bien. Pero si lo veo dentro de IE8, la tabla crece más allá del borde div. ¿Algunas ideas?El ancho de la tabla va más allá del borde div
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
encontrado la solución aquí:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
El truco es usar la propiedad CSS
table-layout. Puede tomar tres valores de : automático, fijo y heredado. El valor normal (inicial) es automático, , lo que significa que el ancho de la tabla viene dado por sus columnas y cualquier borde . En otras palabras, se expande si es necesario.Lo que quiere usar es
table-layout:fixed. Bam! Ahora la tabla es como de ancho como lo ha especificado en el CSS. Ni mas ni menos. Y para mi sorpresa esto parece ser ampliamente compatible con los navegadores. El único navegador de cualquier importancia que no lo admite es IE/Mac, y , la importancia de ese navegador se acerca rápidamente a cero.Siguiente es decidir qué hacer con el contenido que no cabe en la tabla más.Si la tabla sólo contiene texto, word-wrap: break-palabra (word-wrap se especifica en el Módulo CSS3 efectos de texto) obligará el navegador para dividir las palabras como sea necesario para evitar desbordamientos.
El tema es viejo, pero voy a añadir algo para ayudar a los futuros lectores. No olvide decir que 'table-layout: fixed' forzará a las columnas a tener el mismo ancho. Así que si usa este truco, usted tiene que obligar (conjunto) de nuevo cada columna de la tabla de la manera que le guste. – stfsngue
Proporcione el ancho de la tabla como 100% para que ocupe div y no lo cruce.
También podemos establecer que dentro de ella la propia div con overflow: scroll; de manera que tenga una barra de desplazamiento cuando la tabla se expande demasiado ...
solía desbordamiento-x: auto por lo que tendría una barra de desplazamiento horizontal sólo cuando ya era demasiado amplia. Esto se adapta perfectamente a mi diseño. – Chris
cheque de caja lo dimensionamiento está configurado por defecto en el navegador.
box-sizing: content-box; significa:
La anchura y la altura especificada aplican a la anchura y la altura, respectivamente de la caja de contenido del elemento. El relleno y el borde del elemento son dibujados fuera de esta área.
box-sizing: border-box; significa:
La anchura y la altura especificada determinan el cuadro de borde del elemento . Cualquier relleno o borde especificado en el elemento se dibuja dentro del área restante. El cuadro de contenido se calcula restando el ancho del relleno o el borde de los lados respectivos del ancho y la altura especificados.
Por la noche solo se trata de cambiar el valor de box-sizing. hay un artículo al respecto aquí: http://ie8demo.com/BoxSizing.aspx
¿Tiene un ancho establecido en el div? De ser así, se mantendrá en su ancho, permitiendo que la mesa se solape. Intente eliminar el ancho y se ampliará al ancho de su contenedor. Si desea que el div se ajuste al tamaño de la mesa, puede flotarlo.
Agregue el estilo display:table a la etiqueta div. Esto hace que el elemento actúe como una tabla.
Como user384080 mentioned, table-layout:fixed debe añadirse. Sin embargo, simplemente tener table-layout no siempre soluciona el problema. Por favor, asegúrese de que agrega el atributo width así:
<table style="width:100%;table-layout:fixed">
@user lo siento, no Cee que ya diste anchura que el 100% – kobe
@can que publique el código HTML completo con los datos, creo que el texto podría ser ir más allá, tratar de desbordamiento – kobe
seguir desplazándose para encontrar la respuesta más upvoted: 'table-layout: fixed' – timmyc