Comment aligner TH Header avec TD dans TBody
Je vais avoir des problèmes en essayant d'incorporer un tableau dans une page HTML existante avec un peu de CSS.
Cette CSS est de cacher l'en-tête de la table par défaut avec une définition de style comme:
.tablestuff thead {
display: none;
}
Mais je veux que le tableau à afficher, j'ai donc essayé de définir le style sur le thead élément avec "display:block" (avec javascript). Qui fait la tête d'affichage, mais les colonnes de l'en-tête ne sont pas alignées avec le td colonnes.
J'ai réduit mon HTML pour la suite (je l'espère avec un minimum de fautes de frappe) et de montrer le style sur le thead élément défini par javascript.
<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>
Comment puis-je faire à la fois l'en-tête de salon et aussi de s'aligner correctement avec le td colonnes?
source d'informationauteur George Hernando
Vous devez vous connecter pour publier un commentaire.
CSS comprend plus de modes d'affichage que couramment utilisés
none
inline
inline-block
etblock
. Il y a tout à fait un peu deen fait.Dans ce cas, il semble que vous voulez utiliser à la place de
display:block;
estdisplay:table-header-group;
.Voici quelques exemples de différents styles, appliquée à votre table:
http://jsfiddle.net/CrYdz/1
Le problème est causé par le
display:block
dans l'attribut style pour le thead.Changer de
display:table-header-group
Pour définir la largeur de la table d'en-tête et corps de table en table:
Lorsque vous souhaitez afficher l'élément thead utiliser cette valeur:
display: table-header-group;
Peut-être le contenu de l'enquête est plus large que le contenu de la TDs et, en réalité, la largeur n'est pas 20px ensemble.
Donc, parce que vous devez d'abord charger la page sans le thead, la table obtient la largeur de la TDs. Ensuite, lorsque vous affichez le THEAD par js, la largeur de la table continue d'être le même, mais probablement le THs ont différentes largeurs.
d'afficher et de masquer th au lieu de thead avec le css