Gel-tête du tableau avec les CSS premières lignes sont sous l'en-tête

J'ai été en mesure de geler ma table des en-têtes et ont les largeurs des en-têtes et le reste de la correspondance de lignes, mais je ne suis pas en mesure d'obtenir ma première deux lignes à afficher sous l'en-tête. 

table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse;
border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
white-space: nowrap;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #F7FE2E;
}
table th,
table td {
width: 65px;
}
table tr,
table td {
width: 65px;
min-width: 65px;
}
#wrapper {
width: auto;
height: 850px;
overflow-x: scroll;
overflow-y: scroll;
}
thead {
position: fixed;
}
tbody {
position: relative;
}

Si quelqu'un peut me pointer dans la bonne direction sur la façon de déplacer les deux premières rangées sous l'en-tête? Permettez-moi de savoir si j'ai besoin d'expliquer plus ou si je dois ajouter à ma question!

J'ai ajouté un peu les choses, je crois que je n'ai pas expliquer http://jsfiddle.net/FyJwZ/4/

  • Franchement, je serais surpris si cela fonctionne comme vous le dites il n'. Mais en supposant qu'elle fait, avez-vous essayé d'ajouter margin-top à votre tbody styles?
  • J'ai ajouté margin-top à mon tbody et il n'a rien fait. Quel est le problème et pourquoi vous pensez cela ne fonctionnerait pas @KevinBoucher
  • Ouais, le violon montre que cette question n'est pas facile à résoudre. Cela nécessite généralement un peu de JavaScript (même si elle semble simple CSS devrait fonctionner).
  • L'en-tête des colonnes n'apparaissent pas à la ligne avec le corps colonnes. Vous pourrait ressembler à ceci: stackoverflow.com/questions/11499973/... ou ceci: fixedheadertable.com
  • Merci je vais regarder en essayant de mettre en place la façon dont ils l'ont fait dans le lien que vous avez posté. Si il y a d'autres options pour je ne serait pas l'esprit en voyant ceux aussi bien.
InformationsquelleAutor NickC217 | 2013-08-29
  1. 5

    Ici est un jsFiddle en ordre de marche: http://jsfiddle.net/FyJwZ/7/

    Ce sont les modifications que j'ai apportées

    /* this is what will do the trick */
tbody {
display: block;
padding-top: 21px;
}
thead {
z-index: 1; /* put on top of other rows */
}
thead tr td {
background: #ddd;
}
/* only using !important to override your styles below */
td {
margin-left: 0 !important;
width: 100px !important;
}

    Mise à JOUR

    Voici un exemple plus complet: http://jsfiddle.net/kzuwR/14/

    • display: block sur un corps de table... ne pas casser quoi que ce soit? Mon esprit est soufflé.
    • Je ne crois pas qu'il va se casser quoi que ce soit.
    • Ouais, il semble que cela fonctionne très bien; je n'aurais pas attendu.
    • J'ai le sentiment que mon php while déclaration est en train de lancer ce sur tous les. Edit: margin-top ne semble pas faire quoi que ce soit.
    • pourquoi dites-vous cela?
    • parce que de tout temps j'ai mis quelque chose sous table tr:first-child td:first-child{} il les effets de chaque ligne dans la while déclaration. C'est bizarre.
    • Et j'ai mis le code à partir du Violon que @KevinJantzer fait et ça ne fonctionne toujours pas sur ma page avec mon code php.
    • C'est joliment fait. Il y a un peu de contenu saigner au-dessus de la tête que vous faites défiler, mais il fonctionne assez bien. J'ajouterais #wrapper { float: left; } à la taille de l'emballage div de façon appropriée.
    • Ok, j'ai réussi à faire un Violon avec mes données...jsfiddle.net/kzuwR
    • Ok, à jouer avec elle, j'ai compris pourquoi ça ne marchait pas. J'ai dû remplacer mon <th> de balises dans l'en-tête du tableau à <td>. Maintenant, il fonctionne. La question suivante, vous êtes capable de me dire comment l'obtenir pour faire défiler vers la droite et les en-têtes de déplacer trop? Voici la mise à jour de violon avec mes données: jsfiddle.net/kzuwR/10
    • il n'est pas possible de l'en-tête de défilement à gauche et à droite avec CSS, mais avec un peu de JavaScript, vous pouvez. Voici un exemple: jsfiddle.net/kzuwR/14 Note: certains de la CSS a dû changer. Le overflow:scroll styles ont été retirés de la wrapper et de mettre sur les table et thead
    • Ok, il travaille en coulisse, mais quand je prends l'info du Violon et de la mettre dans ma vraie page, ça ne fonctionne pas.
    • Je ne suis pas sûr que j'ai le javascript de travail, si c'est ce qui rend l'en-tête se déplacer.
    • Oui, le JS est ce qui rend l'en-tête d'un défilement horizontal. Probablement le javascript est exécuté avant que la table est en fait dans les DOM. Si vous utilisez jQuery, mettre le code JS dans entre: $(function() { /*code here */ }); Ou vous pouvez utiliser onload sur la table
    • Ok, j'ai mis le code javascript dans une page séparée, et avoir la page de référence <script src=tableheader.js></script>. Puis j'ai mis le tableau id dans ainsi que onload='scrollHeader' Est-ce mal?
    • Eh bien, j'ai aussi la mettre exactement comment il est lorsque je fais afficher la source de la page et ça ne fonctionne pas, sauf si j'ai une page à partir de la page d'affichage de la source de Violon. Je ne suis pas sûr de savoir pourquoi il ne fonctionne pas sur ma page, aussi aucun des CSS à l'œuvre dans IE10.
    • Donc, maintenant, tout d'un coup, il est de travail.
    • Que la cause de IE est boiteux!
    • Je vous entends de là. Je n'ai vraiment utiliser google chrome. Maintenant à savoir comment faire la première colonne de gel. Merci encore pour l'aide!

    InformationsquelleAutor Kevin Jantzer
  2. 0

    Vous avez défini thead{position:fixed}. Je n'ai jamais réellement utilisé position:fixed sur une table d'en-tête comme ça, mais je suppose que c'est épingler en haut de l'image comme vous le souhaitez. Le problème est que fixe la position des éléments à ne pas prendre de place sur la page des trucs glisse bien en dessous d'eux. Vous devriez être en mesure de compenser en ajoutant un margin-top à votre tbody, ou, si cela ne fonctionne pas, à table tr:first-child.

    Si cela ne fonctionne pas non plus, je venais tout juste de coller une taille appropriée vide tr en haut et être fait avec elle.

    Edit: en Fait, en jouant avec votre violon, il ne ressemble pas à la position fixe de la table d'en-tête est correctement réglage de la largeur de vos lignes sur mon navigateur. Quel navigateur utilisez-vous? Cela semble être le type de non-conventionnelles CSS qui peuvent causer de la croix-des problèmes de compatibilité navigateur. (Tables ont tendance à être difficile de cette façon.)

    • Je suis en utilisant google chrome, comme mon navigateur
    • C'est malin, mais ouais, je vais avoir le même problème avec elle ainsi, c'est à dire la ligne d'en-tête de ne pas obtenir la taille correctement.
    InformationsquelleAutor user1618143