Affichage CSS: inline/none avec tables fonctionne avec Firefox mais pas Chrome ou Safari

Je travaille sur une application rapide et sale qui implique plusieurs tables à une seule colonne affichées horizontalement dans une table externe.Affichage CSS: inline/none avec tables fonctionne avec Firefox mais pas Chrome ou Safari

|-------------------------------------------| 
|    outer table     | 
|-------------------------------------------| 
| --------- --------- --------- | 
| | table 1| |table 2| |table 3| | 
| --------- --------- --------- | 
| | row 1 | | row 1 | | row 1 | | 
| --------- --------- --------- | 
| ...         | 
| --------- --------- --------- | 
| | row n | | row n | | row n | | 
| --------- --------- --------- | 
|           | 
|-------------------------------------------| 

     --------- ---------  
     |SHOW #2| |SHOW #3| 
     --------- ---------

Je sais que cela pourrait être fait en utilisant des tables sans css, mais je ne suis pas assez habile et cela n'a pas besoin d'être élégant. Au début, seule la première table est affichée. En cliquant sur les boutons, l'affichage passe de "none" à "inline" (j'ai aussi essayé "block") de # 2 et # 3. Dans cet exemple, je définis le style de # 2 dans un DIV autour de la table et dans # 3 dans un TD autour de la table. Les deux méthodes fonctionnent dans Firefox 22.0 mais pas dans Chrome 27.0 ou Safari 5.0 (tous sur Mac). Y a-t-il une solution utilisant des tables? Ou, si vous souhaitez concevoir la feuille de style, qui fonctionne trop :-)

<html> 
<body> 

<table id = "main" border=0 cellspacing=20> 

    <tr> 
     <td> 
      <table id = "tbl1" border=0> 
       <tr><td> table #1, row #1 </td></tr> 
       <tr><td> table #1, row #2 </td></tr> 
      </table> 
     </td> 

     <td> 
      <!-- Hide the table with a hidden DIV --> 

      <div id = "tbl2" style="display:none"> 
       <table border=0> 
       <tr><td> table #2, row #1 </td></tr> 
       <tr><td> table #2, row #2 </td></tr> 
      </table> 
      </div> 
     </td> 

     <!-- Hide the table with a hidden TD --> 

     <td id = "tbl3" style="display:none"> 
      <table border=0> 
      <tr><td> table #3, row #1 </td></tr> 
      <tr><td> table #3, row #2 </td></tr> 
     </table> 
     </td> 
    </tr> 
</table> 

<br> 

<input type=button value ='show table #2' onclick='document.getElementById("tbl2").style="display:inline"'> 
<input type=button value ='show table #3' onclick='document.getElementById("tbl3").style="display:inline"'> 
<br> 
<br> 
<input type=button value ='hide table #2' onclick='document.getElementById("tbl2").style="display:none"'> 
<input type=button value ='hide table #3' onclick='document.getElementById("tbl3").style="display:none"'> 

</body> 
</html>

Source

2013-07-17 LKramer

'style =" display: table-cell; "' travaillé dans tous les navigateurs ici (Windows). –

fait simple exemple http://jsfiddle.net/insanebits/beCML/ – insanebits

Voici un example un travail. Tout en le faisant, je ne savais pas que vous ne vouliez pas utiliser jQuery, mais je vous recommande fortement de changer d'avis, car tout ce que vous avez à faire est d'ajouter ceci à votre code HTML, de préférence juste avant la fermeture tag:

J'ai également changé le code HTML un peu: J'utilise 1 entrée par table: "afficher ou masquer" en 1 bouton. Mais vous pouvez bien sûr utiliser 2 boutons: changez simplement le jQuery et appelez hide() ou show() en conséquence. Si vous ne voulez vraiment pas utiliser jQuery, vous pouvez convertir mon exemple en JavaScript pur, mais il semblerait que cela prenne un peu plus de code pour vous :)

Source

2013-07-17 14:54:22

Huh. Je n'avais pas réalisé que vous pouviez vous connecter directement à code.jQuery.com. Cela facilite la gestion de l'application. Donc, je vais prendre votre recommandation et aller sur la route jQuery. Merci pour le code lapidaire! – LKramer

@LKramer Mieux vaut utiliser celui hébergé sur le CDN de Google, et non sur le site jQuery. Exemple de lien serait 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'Voir https://developers.google.com/speed/libraries/devguide#jquery –

@LKramer Glad cela a fonctionné pour vous :) –

Vous pouvez utiliser TABS ici et encore votre table-Element. Essayez ceci: http://jqueryui.com/tabs/ Il devrait vous aider à résoudre votre problème

Source

2013-07-17 13:59:28 LittleHoopoe

Merci, Paul, mais j'ai besoin de toutes les tables pour montrer à la fois. (Je suis également libre de jQuery pour cette application.) – LKramer

Affichage CSS: inline/none avec tables fonctionne avec Firefox mais pas Chrome ou Safari

Répondre

Questions connexes