Plusieurs thead/tbody design
J'ai une question sur l'ergonomie/design.
Je suis actuellement à l'aide de certains de JQuery pour afficher/masquer des zones entières. Actuellement, ces sont tous dans une grande table avec un thead au très haut comme le principal, en-tête, suivi par un deuxième thead qui est l'en-tête de ce qui serait affiché. La prochaine est une autre thead qui est l'en-tête de ce qui est caché qui s'affiche dans une tbody.
Je sais que c'est horrible de style cependant, le problème que je suis en train de les surmonter, je veux toutes les lignes, les mêmes qu'ils sont tous les affichant le même type de données.
Exemple de Code est
<table id="report">
<thead>
<tr id="header">
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
</thead>
<thead>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
</thead>
<thead>
<tr>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
<td>Fourth Row</td>
<td>Fifth Row</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr><td>some other stuff</td></tr>
</tbody>
</table>
Ci-dessous est ce qui est affiché:
le texte d'alt http://img694.imageshack.us/img694/9773/screenshot20100708at100.png
le texte d'alt http://img822.imageshack.us/img822/9206/screenshot20100708at101.png
La raison pour laquelle j'ai fait réellement, c'est parce que généralement, je vais avoir 4 lignes pour l'afficher en-tête (cet exemple est le pays des données) et seulement 3 colonnes à partir de l'en-tête étant caché (première rangée, deuxième, etc). Ces données à l'intérieur a 1 ligne est une URL qui peut être n'importe où à partir de 10 caractères à 100+ (100+) qui résultats dans l'ensemble de l'écran change et mes en-têtes deviennent de 2 ou 3 lignes. Tout ce que je voulais, c'était pour toutes les lignes de rester le même, est-il possible de les associer à seulement 1 tbody avec 1 thead à l'intérieur de la table, de sorte qu'il n'aura pas d'effet sur d'autres. Depuis ce qui est probablement assez déroutant est-il un meilleur moyen d'avoir plusieurs tables, mais le thead de chacun restent les mêmes, peu importe les données dans la tbody.
Je sais qu'il y aura des questions mais toute aide serait grandement appréciée et remarque, je suis complètement ouvert à le faire d'une manière différente. Cependant, ce qui est nécessaire, c'est que les données peuvent être cachées qui est un tableau et aura un en-tête pour cette information. Il peut y avoir un affichables section qui ne doit pas correspondre (cela pourrait être un div) et les données à l'intérieur de chaque section doit garder le même format.
PS: Si cela vous intéresse ci-dessous est le JQuery je suis à l'aide de cette chose entière.
<script type="text/javascript">
$(document).ready(function(){
$("#report thead").children("tr:odd").not("#header").addClass("odd");
$("#report thead").children("tr:odd").not("#header").each(function(index){$(this).attr("id", "id" + index);});
$("#report thead").children("tr:even").not("#header").addClass("bodyhead");
$("#report thead:even").not(":first-child").each(function(index){$(this).attr("id", "bhid" + index);});
$("#report tbody").each(function(index){$(this).attr("id", "bid" + index);});
//$("#report tbody").each(function(index){$(this).attr("id", "id" + index);});
//$("#report tbody").children("tr:not(.odd)").hide();
$("#report tbody").hide();
$("#report thead:even").not(":first-child").hide();
//$("#report tbody #id0").show();
//For header of headers.
$("#report thead").children("tr:first-child").show();
$("#report thead").children("tr").not("#header").not(".bodyhead").click(function(){
$("#report #b" + this.id).toggle();
$("#report #bh" + this.id).toggle();
$(this).find(".arrow").toggleClass("up");
});
});
</script>
OriginalL'auteur Craig | 2010-07-08
Vous devez vous connecter pour publier un commentaire.
Plusieurs
<thead>
s dans un tableau n'est pas valide HTML. La plupart des lignes que vous avez dans<thead>
s sont contiennent des données qui ne sont pas têtes de, devrait donc être dans un<tbody>
.Oui, utiliser un tableau distinct.
Si vous voulez les largeurs de colonne à être statique taille tout le chemin vers le bas de sorte que les tables aligner les uns avec les autres, de définir les styles
table-layout: fixed; width: 100%
sur chaque table, et de définirwidth
styles sur chacune des cellules de la première ligne (ou, mieux<col>
s) que vous ne souhaitez pas partager une même proportion de la largeur de la présentation.(C'est une bonne idée d'utiliser
table-layout: fixed
dans la mesure du possible, que c'est plus rapide à calculer et beaucoup plus prévisible que celui de l'automobile de table algorithme de mise en page, en particulier dans IE, qui a un peu foiré en place de la mise en œuvre de ce en particulier lorsque vous utilisezcolspan
.)table-layout: auto
ettable-layout: fixed
de manière détaillée? Ne pouvais pas trouver un stable et claire explication avec des cas d'utilisation pour les deux, trouvé ce css-tricks.com/fixing-tables-long-strings mais il ne montre que des exemples sans expliquer ce qui se passe dans les détails.OriginalL'auteur bobince
La
thead
doit uniquement contenir le réel en-têtes, c'est à dire "Pays - de la population de la Zone - Langues Officielles" Le reste des données est et appartient à la tbody.Ce que vous avez marqué "Première ligne, deuxième ligne..." sont des colonnes, pas de lignes. Il semble que vous essayez de cacher toutes les lignes après la première ligne. Votre tableau devrait ressembler à ceci:
Et vous pouvez masquer toutes les lignes après la première, avec quelque chose comme ceci (en supposant qu'ils commencent cachée):
Si vous avez plus d'un masquer la section en série au sein de la même table
où
n
est le nombre de lignes dans une section. Ou vous pouvez simplement utiliser un tableau pour chaque masquer la section.Je ne comprends pas ce que vous êtes en train de dire, mais ça sonne comme quelque chose qui peut être résolu en contrôlant les dimensions de la table dans votre feuille de style comme bobince suggère.
Ah, je vois. Si vous voulez un deuxième niveau d'en-têtes d'un tableau (ou tables) à l'intérieur d'un tableau, plutôt que de donner un tableau de plusieurs sections d'en-tête.
OriginalL'auteur jasongetsdown