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)?

Regarder le conteneur de classe css de bootstrap. Cela vous mènera à quelque part.
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