Dev Faq
8
votes

Pure CSS Table de défilement UL Li avec en-tête fixe

J'essaie de mettre en œuvre une table UL-Li défilante Pure CSS avec un en-tête fixe.

Mes exigences: p>

  • Utilisation de la table CSS (table, rangée de table, cellule de table, tête-en-tête ...) li>
  • Toutes les cellules doivent être des éléments de liste (LI) li>
  • L'en-tête doit être corrigé lorsque le contenu de la table est défilant li>
  • Lorsque la colonne de table change la largeur, la largeur d'en-tête appropriée doit être modifiée li> ul>

    J'ai actuellement HTML: P> 

    .testTable {
  display: table;
  margin: 0px;
  padding: 0px;
}

.testRow {
  display: table-row;
}

.testRow > span {
  list-style:none;
  display: table-cell;
  border: 1px solid #000;
  padding: 2px 6px;
}

.testHeader {
  display: table-header-group;
  /*position: absolute;*/
}

.testHeader span {
  background-color: #ccc;
}

.testBody {
  display: table-row-group;
}

15 commentaires

haut, droite, gauche, bas pourrait aider avec ceci

Pouvez-vous expliquer pourquoi cette question que vous avez référencée n'est pas ce dont vous avez besoin?

@El: Je ne suis pas sûr de comprendre ce que tu veux dire

@Anamaria: J'ai besoin de pure table CSS, voir mes exigences. Cet exemple n'utilise pas cela pour la pose de la table.

Vous ne devriez pas nier votre balisage comme vous le faites actuellement ... Le seul enfant valide d'une liste (

    ou
      ) est un Élément de liste (
    1. ).

      @Andredion: Mais comment puis-je obtenir un groupe d'en-tête de Li alors? Ou il n'est pas possible de mettre en œuvre la table à l'aide de LIS et de TABLE-CSS?

      Il n'y a pas de solutions croisées croisées. Pour Chrome / FF, vous pouvez faire comme ceci: Stackoverflow.com/a/17618682/1654265 . Combinaison de positionnement avec affichage: table; Besoin de la magie sombre (TM) pour travailler: &

      @Andrealigios: Pas de chance, voir Relative + Contenu emballé absolu ici . L'en-tête tomba à nouveau.

      Pourquoi avez-vous besoin d'utiliser des tables s'il y a d'autres façons de faire cela?

      @Danield: Je ne veux pas que Calc expérimental () - Ing des largeurs / hauteurs de pixels, JavaScript pour attraper des événements de redimensionnement, une solution correcte dans une mise en page mais tombe en partie dans l'autre, comme mélanger des flotteurs + nonfloats. Aucun piratage. J'aimerais utiliser les propriétés CSS de modélisation de table disponibles si possible.

      Vos données ressemblent à des données tabulaires, je pense donc qu'il est plus sémantique dans ce cas d'utiliser

      pour cela.

      Autre chose qu'une table pour ce contenu serait une mauvaise utilisation du balisage.

      n'est pas un élément valide pour avoir à l'intérieur d'un
        Ceci va causer des résultats inattendus. Il faut se méfier.

        J'accepte l'Andi et Danield, pourquoi ne pas utiliser une table pour afficher vos données tabulaires ... c'est là qu'ils sont conçus pour. Y a-t-il une raison spécifique pour laquelle vous ne voulez pas utiliser de tables?

        Je vois que beaucoup de gens sont concernés pourquoi suis-je en utilisant des éléments de liste HTML pour afficher des données tabulaires. Je n'ai pas le temps de tout expliquer, mais je promets que je le ferai demain.

      3 Réponses :

      5
      votes

      Dès que vous spécifiez Position: absolu ou Position: fixe sur .Testheader , il définit Affichage: bloquer < / Code> Qui remplace Affichage: Table-Header-Group .

      Voir ce fil pour plus de détails .

      5 commentaires

      OK, mais comment puis-je obtenir cette fonctionnalité alors avec les attributs de la table de CSS?

      Ceci est un problème parce que j'utilise le plugin MVC et Jqery qui s'appuie sur Ajaxed Li's of Server, que je suppose ensuite en tant que cellules de table. Cela ne fonctionne pas avec TD. Et comme je le comprendi, CSS Gurus Dites la table est tellement l'année dernière ... hm ...

      Les tables sont destinées aux données tabulaires. Vous essayez de réinventer la roue ici d'une manière très inappropriée. Si vous avez la lutte contre ce que votre serveur répond avec, abstraitez vos données dans un format de mise en page-agnostique tel que JSON, puis le rendez-vous à votre guise.

      Je vous ai déjà dit qu'il y ait un plugin JQuery qui établit des articles et s'attend à ce que LIS, pas de TDS. Il échoue sur TDS. Je ne peux pas changer le plugin. Que feriez-vous à ma place?

      Je sortirais le plugin car il ne semble pas correspondre aux besoins de votre application.

      5
      votes

      Vous pouvez essayer ceci: Démo

      J'ai eu Celles-ci sont correctes en PURE CSS:

      2
      votes

      Je pense que j'ai résolu ce problème en créant une deuxième section d'en-tête. Pour démarrer, j'ai dupliqué le "Testheader" HTML: 

      .testHeader {
  display: table-header-group;
  visibility: hidden;
}

      3 commentaires

      @OzrentkalceckRznaric était-ce de toute utilisation?

      Je crois que c'est ça. Je suis désolé, je n'ai pas eu le temps de regarder cela jusqu'à présent, mais demain si des tests passent, je l'incorporerai dans la solution que nous mettons en œuvre.

      Votre solution a passé le test, mais nous n'avons pas compté dans le cas lorsque le contenu est plus large que l'étiquette et il n'y a pas de blancheurs pour les pauses de la page. Ensuite, l'en-tête devient mal aligné, comme Ceci . Un autre problème est que le contenu de WhitSpace ordinaire devient plus large que l'étiquette, et la table n'est pas dans un conteneur de largeur constante, comme Ceci . Y a-t-il une possibilité de résoudre ces deux problèmes?

      Articles qui pourrait vous intéresser :

      Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
      Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
      Changer la direction de défilement de la page Web sur la version mobile
      Target first-child css styled-components