Sensible table à l'aide de CSS display: table-row
Je vais avoir du mal à convertir ma table pour une plus responsive design, j'ai essayé de nombreuses ressources sur Google, mais ils sont tous limités et ne fonctionnent pas comme prévu. Le problème sous-jacent que je vais avoir, c'est que mes tables sont générées de façon dynamique et je ne veux pas modifier les ressources que j'ai trouver sur Google afin que je puisse les mettre à jour facilement et ne salissez pas avec le code de trop.
De toute façon, ma table a vraiment une conception simple. Il y a 5 colonnes X lignes (en fonction de ce qui est généré à partir de la base de données). Chaque fois qu'un utilisateur redimensionne leur navigateur (ou quand ils sont à l'aide d'un téléphone mobile) je veux changer ma table, il est donc approprié sur les petits écrans. Un exemple de ceci serait:
Bureau
Header 1 | Header 2 | Header 3
------------------------------
Content | Content | Content
Téléphone
Header 1 | Content
------------------
Header 2 | Content
------------------
Header 3 | Content
Je suis en train d'accomplir cela en utilisant display: table-row
à l'aide de CSS à chaque fois que l'écran atteint une certaine largeur, j'ai créé cette jsfiddle pour afficher mon code actuel. Cependant, actuellement, le th
et td
sont affichées verticalement au-dessus de/sous les uns des autres, et non pas les uns à côté des autres comme j'ai l'intention de le faire. J'ai essayé d'utiliser float: left
et float: right
mais qui ne fonctionne pas (voir la jsfiddle). Quelqu'un peut-il m'aider à accomplir ce que je veux en utilisant le CSS? Et si cela n'est pas possible, comment pourrais-je aller sur l'aide de Javascript pour cela, en gardant à l'esprit que mes tableaux ne seront pas tous être généré lorsque la page est chargée (certains sont ajoutées dynamiquement à la page)?
Voici un bel article sur le responsive tables à partir de css-tricks.com.
Je suis à défaut de voir ce que
margin
et padding
serait utile dans ce cas, c'est ce que container
classe de Bootstrap.J'ai lu que l'on a déjà, mais ils sont de donner des solutions que je ne veux pas mettre en œuvre parce qu'ils ne fournissent pas de solutions j'ai besoin (un graphique en secteurs, par exemple), et la seule solution qui se rapproche de mon cas ne fonctionne pas pour moi, que mes tables sont générées de façon dynamique.
OriginalL'auteur Kevin Voorn | 2015-01-07
Vous devez vous connecter pour publier un commentaire.
À l'aide de
thead
ettbody
éléments, vous pouvez essayer comme ceci:http://jsfiddle.net/uzsw7s4o/
CSS
vous pouvez ajouter un min-width de l'élément de tableau ou de définir une largeur relative à la
thead
ettbody
(par exemple, 50% de chaque)Hé là encore! J'ai mis en place de votre solution et je me demandais si il est possible également d'avoir un
thead
pour toustd
éléments, parce que nous avons parfois de plus de 1 ligne. Je sais qu'il n'est pas possible avecthead
lui-même, mais peut-être avec des sous-titres? Ou quelle serait la meilleure façon d'être?pas sûr au sujet de votre objectif, mais vous pouvez avoir de nombreux tbody éléments dans le même tableau
OriginalL'auteur fcalderan
J'ai fourchue vous tripoter. C'est la façon dont je voudrais résoudre:
HTML
CSS
OriginalL'auteur Joshua Behrens