table entière Hiding redimensionne

Avoir une page HTML avec une table simple et le code js pour faire afficher/cacher sur elle:table entière Hiding redimensionne

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>title</title> 
    <script type="text/javascript"> 


    function showErrorSteps() 
    {   
     var el = document.getElementById("t1"); 

     if(el.style.display=="none") 
     { 
      el.style.display="block"; 
     } 
     else 
     { 
     el.style.display="none"; 
     }            
    } 

    </script> 
</head> 
<body> 

<br /> 
<span onclick="showErrorSteps()">[click]</span> 
<br /> 
<br /> 

<table id="t1" border="1" width="100%" style="table-layout: fixed"> 
<tr> 
    <td>s</td> 
    <td>d</td> 
    <td>a</td> 
</tr> 
</table>   
</body> 
</html>

Qu'est-ce qui se passe est que sur Mozilla la table se redimensionnée après avoir cliqué sur deux fois (même avec la mise en page: css fixe). IE fonctionne bien.

Source

2009-02-17 Bogdan Gavril

Y a-t-il du DOCTYPE dans cette page? Si non, pourquoi l'espace de noms xhtml? – AnthonyWJones

mise en page: fixe est une chose IE, pas standard – Greg

@RoBorg - je suis très heureux avec les implémentations non standard IE; j'utilise encore Mozilla :) :) @Anthony ... bon point –

Les tables ne doivent pas être définies sur display: block. Les lignes de table et les cellules ne devraient pas non plus. Ils ont différentes valeurs d'affichage. Mon conseil? Ne fais pas ça de cette façon. Utilisez une classe:

.hidden { 
    display: none; 
}

et ajouter dynamiquement et le retirer de la table pour éviter les problèmes de réglage du type d'affichage à droite sur un élément que vous présentez.

Modifier: Pour clarifier le commentaire sur pourquoi faire de cette façon et ce qui se passe. Essayez ceci:

<table> 
<tr> 
    <td>Cell 1</td> 
    <td style="display: block;">Cell 2</td> 
</tr> 
</table

Il va (ou devrait) bousiller votre disposition de table. Pourquoi parce qu'un <td> élément, par défaut, a display: table-cell pas block. Les tables sont les mêmes. Ils ont display: table.

La désactivation des attributs CSS est ... problématique.

Il est donc préférable d'utiliser des classes pour définir et annuler les attributs. Il est plus facile de changer (la classe réside dans un fichier CSS et n'est pas du code), évite des problèmes tels que redéfinir la valeur d'origine et fournit généralement une solution plus propre, surtout avec une librairie comme jQuery. En jQuery, vous pouvez faire:

$("table").toggleClass("hidden");

Terminé. Vous pouvez également utiliser addClass() et removeClass() si cela est plus approprié. Par exemple:

<input type="button" id="hide" value="Hide Table"> 
... 
<table id="mytable"> 
...

$(function() { 
    $("#hide").click(function() { 
    if ($("#mytable").is(".hidden")) { 
     $("#hide").val("Hide Table"); 
     $("#mytable").removeClass("hidden"); 
    } else { 
     $("#hide").val("Show Table"); 
     $("#mytable").addClass("hidden"); 
    } 
    }); 
});

Et là, vous avez une solution robuste, concise et facile à comprendre (une fois que vous obtenez votre tête autour de la syntaxe jQuery, qui ne prend pas longue).

tripoter Javascript est directement si :-) 2002.

Source

2009-02-17 13:37:17 cletus

Cela fonctionne bien que je dois admettre que je ne comprends pas pourquoi cela fonctionne. – AnthonyWJones

@cletus: Quelle est la valeur par défaut pour l'affichage d'une table, ce n'est pas Block. – AnthonyWJones

Simple. Parce que l'affichage de la classe sera none et que la classe ne sera pas affichée par défaut. Il n'y a pas de persistance. Je continue à dire aux gens que la manipulation de classe est meilleure que la manipulation de style mais vont-ils écouter;) – annakata

Cela pourrait être parce que vous définissez le style.display à « bloc ». Essayez de le définir sur "". Vous devez également définir la largeur de la table en utilisant CSS. (width: 100%;)

Source

2009-02-17 13:39:17

Ceci n'est pas une réponse directe à votre question, mais une recommandation sérieuse. J'ai récemment découvert les joies de JQuery. Tout ce genre de choses peut être fait sans effort et il existe de nombreux exemples et références disponibles en ligne. Si vous n'avez pas le temps d'y entrer maintenant, je suis sûr que quelqu'un proposera une solution ici, mais je recommanderais à quiconque fait quoi que ce soit au-delà de la manipulation JavaScript la plus superficielle de considérer JQuery (ou similaire) cadre).

JQuery propose des méthodes Hide(), Show() et Toggle() indépendantes du navigateur. Voici l'un de mes préférés references.

Source

2009-02-17 13:48:14

Merci, je vais regarder dedans. En fait, je travaille sur un projet .net win forms, donc je n'interagis pas vraiment avec html, sauf quand je veux faire des reportages fantaisistes. –

table entière Hiding redimensionne

Répondre

Questions connexes