Firefox no puede diseñar tablas anidadas correctamente?

Quiero implementar un menú plegable. Planeo usar el componente de tabla para simular un menú, y anidar una subtabla en una celda de tabla para simular un submenú.Firefox no puede diseñar tablas anidadas correctamente?

A continuación es mi código, funciona como se esperaba en Internet Explorer, Chrome y Safari, pero no funciona bien en Firefox:

<html> 
<body> 
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1"> 
    <table width="200px" height="90" border=1 cellpadding="0" cellspacing="0"> 
    <tr> 
     <td colspan=2>Money</td> 
    </tr> 
    <tr> 
     <td colspan=2>Tool</td> 
    </tr> 
    <tr> 
     <td>Food 
     <table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td>Cookie</td> 
      </tr> 
      <tr> 
      <td>Fruit 
       <table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td>Apple</td> 
       </tr> 
       <tr> 
        <td>Banana</td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

Parece que Firefox piensa que la "izquierda" y "superior" El atributo para el menú de nivel 3 es relativo al menú de nivel 1, por lo que distribuye el menú de nivel 3 incorrectamente. Otros navegadores calcularán la base de compensación en el menú de nivel 2, que funciona como se esperaba.

¿Es un error en Firefox? Si es así, ¿cómo puedo solucionarlo? Quiero que mi código tenga el mismo comportamiento en todos los navegadores principales.

Fuente

2010-05-19 user344973

Oh muchacho. Ha pasado un tiempo que he visto tantas tablas en un solo lugar :) :) Bienvenido a SO. –

FWIW, creo que tendrías que dar la posición 'td's' relativa' para que esto funcione, pero eso causará otros problemas. Creo que deberías hacer esto con una estructura mucho, mucho más simple. Me tengo que ir ahora, pero estoy seguro de que alguien presentará una sugerencia. –

@ooplidi, tengo que estar de acuerdo con @Pekka. Obtendrá más problemas si usa Relative, pero esta es también una mejor manera de hacerlo. ¿Esto realmente TIENE que estar en las tablas? –

mesas de embalaje en divs parece resolver el problema:

<html> 
<body> 
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1"> 
    <table width="200px" height="90" border=1 cellpadding="0" cellspacing="0"> 
    <tr> 
     <td colspan=2>Money</td> 
    </tr> 
    <tr> 
     <td colspan=2>Tool</td> 
    </tr> 
    <tr> 
     <td>Food 
     <div style="position:absolute; left:200px; top:60px; z-index:1"> 
     <table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td>Cookie</td> 
      </tr> 
      <tr> 
      <td>Fruit 
       <div style="position:absolute; left:200px; top:30px; z-index:1;"> 
       <table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td>Apple</td> 
       </tr> 
       <tr> 
        <td>Banana</td> 
       </tr> 
       </table> 
       </div> 
      </td> 
      </tr> 
     </table> 
     <div> 
     </td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

De hecho, sería mejor no usar tablas en absoluto, pero sólo divs con bordes adecuados.

Fuente

2010-05-19 11:16:37 kgiannakakis

En segundo lugar la política "No Table" avanza por @kgiannakakis^_^ –

+1 por la última oración. Las tablas no deben usarse para diseños. –

Es un error conocido: https://bugzilla.mozilla.org/show_bug.cgi?id=63895.

Fuente

2010-05-22 23:43:02

Firefox no puede diseñar tablas anidadas correctamente?

Respuesta

Cuestiones relacionadas