2010-06-14 22 views
7

estoy usando tabla para mostrar un conjunto de datos, el código HTML va aquí ...HTML ¿Ancho de tabla en IE?

<table border="1" cellspacing="0" cellpadding="0" style="width: 780px;"> 
    <tbody> 
    <tr> 
     <td style="width: 780px; height: 25px;"> 
     <pre width='100' style='width: 780px; word-wrap: break-word;'> 
      the data goes here..... 
     </pre>    
     </td> 
    </tr> 
    <tr> 
     <td style="width: 780px; height: 25px;"> 
     <pre width='100' style='width: 780px; word-wrap: break-word;'> 
      the data goes here..... 
     </pre>    
     </td> 
    </tr> 
    </tbody> 
</table> 

esta tabla funciona bien en Firefox, Safari y IE8. Pero el problema surge en IE7, IE6 ... cuando la tabla se expande y sale de la pantalla (es decir, se expande hacia el lado derecho en el eje x) .... ¿hay algún truco para solucionarlo?

las capturas de pantalla de IE6 en IETester:

enter image description here

Respuesta

2

El problema se resuelve, como lo hacía el código como

<table border="1" cellspacing="0" cellpadding="0" width="780" style="table-layout:fixed"> 
<col width="780"> 
<tbody> 
<tr> 
    <td style="width: 780px; height: 25px; overflow:hidden;"> 
    <pre width='100' style='width: 780px; word-wrap: break-word;'> 
     the data goes here..... 
    </pre>    
    </td> 
</tr> 
<tr> 
    <td style="width: 780px; height: 25px; overflow:hidden;"> 
    <pre width='100' style='width: 780px; word-wrap: break-word;'> 
     the data goes here..... 
    </pre>    
    </td> 
</tr> 
</tbody> 
</table> 

en el código anterior hay tres cambios ...

  1. en la etiqueta de la tabla de atributos de la anchura es establecer (en lugar de establecerlo en el atributo de estilo)
  2. col tag se establece con el ancho igual que el ancho de la tabla
  3. y en el estilo de TD, el desbordamiento se establece en oculto, (desbordamiento: oculto).

Tengo esta información desde el enlace que figura a continuación, por favor, echa un vistazo a todo el mundo ... "http://www.tek-tips.com/faqs.cfm?fid=4499" y de ahí mi problema fue resuelto.

0

intenta

<table border="1" cellspacing="0" cellpadding="0" width="780"> 
+0

no, no funcionaba con IE7 e IE6 .. todavía ampliado hacia la derecha ... –

+0

es que la solo el contenido en su página puede suceder debido a que lo usa en algún div. compruebe lo que sucede con el único código proporcionado si no es así. – Salil

0

acabo de prueba utilizando el código HTML y parecía idéntica en IE6, IE8 (modo de compatibilidad) e IE8 (modo normal) y lo mismo en Firefox.

Algo más en su página web debe estar afectando el diseño, así que publique un ejemplo completo.

Este es el ejemplo completo que probé.

<html> 
    <body> 
     <table border="1" cellspacing="0" cellpadding="0" style="width: 780px;"> 
      <tbody> 
      <tr> 
       <td style="width: 780px; height: 25px;"> 
       <pre width='100' style='width: 780px; word-wrap: break-word;'> 
        the data goes here..... 
       </pre>    
       </td> 
      </tr> 
      <tr> 
       <td style="width: 780px; height: 25px;"> 
       <pre width='100' style='width: 780px; word-wrap: break-word;'> 
        the data goes here..... 
       </pre>    
       </td> 
      </tr> 
      </tbody> 
     </table> 
    </body> 
</html> 
+0

en realidad esta tabla se forma dinámicamente en backend usando PHP ... hay headers.php, footers.php y content.php formando esta página ... –

+0

De ahí la importancia de mostrarnos toda la página para que podamos volver a crear el problema. – Fenton

2

También puedes probar el estilo salto de palabra: break-all;

+0

he resuelto mi problema ... por la respuesta anterior .... y trataré de usar la regla de salto de palabra, y verifico si eso funciona con todos los navegadores ... y gracias @Rodeo Ramsey ... –

+0

¿Dónde se supone que se aplicará este estilo? necesito ver un ejemplo –

18

Usar la CSS a continuación y esto debe prevenir su mesa supere el tamaño máximo que defina:

table{ 
    table-layout:fixed; 
} 
+1

table-layout no funcionó para mí, probando el hizo el trabajo. –

Cuestiones relacionadas