Cellules de tableau responsives 
Author: Alain B.Bonjour,
j'ai un petit souci avec un tableau qui ne veut pas s'adapter à la largeur de ma fénêtre.
Le site est principalement fait pour tablette et smartphone.
Dans le fichier joint, le tableau de droite est incomplet, l'internaute doit utiliser le défilement latéral, et cette barre se situe tout en bas. Il doit descendre, remonter, et ainsi de suite, ou bien faire défiler latéralement avec son doigt (c'est fastidueux).
J'ai trouvé une astuce sur votre forum:
<style> table {word-break: break-word;} </style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
Mais toutes les cellules de la ligne sont concernées et la colonne de droite, contenant des dates, s'affiche sur deux lignes (tableau de gauche du fichier joint).
Comment résoudre mon dilemme ?
Merci d'avance.
Alain B.
(It > Fr) ... le code que vous avez posté (<style>+<script>) est une invention de moi il y a quelques années, pour rendre les tables WebSiteX5 élastiques ...
... en voyant votre STAMP, je pense que vous pourriez conditionner l'amplitude de la première colonne, mais pour pouvoir évaluer, je dois voir le lien réel de la page, ou un exemple en ligne ...
ciao
Bonjour à vous !
J'ai exactement le même problème....
En tout cas merci beaucoup KolAsim pour cette astuce !
Le problème c'est que le tableau est bien élastique, mais la mise en forme de la dernière colonne n'est pas respectée dans un affichage sur smartphone. Le texte à l'intérieur s'affiche verticalement et impossible de changer les choses, même en mettant un faux texte de la couleur du fond avant et après le texte à afficher.
La seule solution consiste à élargir exagérément les colonnes (presque 50% et 50% dans un exemple avec 2 colonne) pour que le format soit respecté, mais alors la version sur ordinateur est moche puisqu'au lieu d'avoir une grande colonne et une petite on se retrouve avec 2 grandes colonnes !
Je pense que c'est le style classique de tableau utilisé dans pas mal de commerces (grille tarifaire)
Merci pour votre aide !
Je suis sûr qu'il y a une astuce ultime pour débloquer cette astuce de sorte qu'elle fonctionne à 100% ! ;-) Ce serait vraiment le top ! et d'ailleurs clairement une fonction à ajouter lors d'une mise à jour , tellement c'est utile !!
http://www.so-beauty-center.com/soins-mary-cohr.html
(It > Fr) ... le lien vaut plus que 100 mots ...
...
... changer mon code, simple:
<style>
table {word-break: break-word;}
td:nth-child(2) {width:20% !important;background-color:WhiteSmoke !important}
</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
.............................................................
... ou changez mon code EXTRA:
<style>
.fs40lh1-5 {font-size:7vw !important;line-height: 140% !important;}
table {word-break: break-word;max-width:1150px !important;}
tr:nth-child(1) { background-color:LightCyan !important;}
td:nth-child(2) {width:20% !important ; background-color:WhiteSmoke !important}
</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
.
ciao
MERCI BEAUCOUP KolAsim !!!!!! CA FONCTIONNE PARFAITEMENT !!!!
Pour ceux qui liront ce post, je complète ta réponse (modestement) : en fait j'ai ajouté une 3 eme colonne, et du coup j'ai simplement ajouté une nouvelle ligne, j'en ai déduis que les child() devaient être ajouté...
Avec 3 colonnes
<style>
table {word-break: break-word;}
td:nth-child(2) {width:20% !important;background-color:WhiteSmoke !important}
td:nth-child(3) {width:20% !important;background-color:WhiteSmoke !important}
</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
Et sans le fond coloré :
<style>
table {word-break: break-word;}
td:nth-child(2) {width:20% !important}
td:nth-child(3) {width:20% !important}
</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
Encore merci pour ton aide...
Bonne continuation
...
... ciao ... 
...