[{"data":1,"prerenderedAt":17},["ShallowReactive",2],{"$f7qbRXFBwXwz0XsGj8hRW1FqKm_UIqH0K6uSbAHlOFog":3},{"id":4,"date":5,"summary":6,"thumbImage":7,"author":8,"commentsCount":9,"title":10,"articleURL":11,"content":12,"tags":13,"articleExtras":14},179,"27/04/2026 20:10:21+02:00","\u003Cp>Qui d'entre-nous peut se vanter assez fortuné pour ne jamais avoir rencontré cette situation?\u003C/p>\n","/assets/shorts/shorts_code1.png","DkVZ",0,"Web Design: mon tableau déborde de partout c'est moche",null,"\u003Cp>Les tableaux en HTML c'est vraiment génial à un tel point que personne ne les utilise.\u003C/p>\n\n\u003Cp>Et je sais pourquoi, fût un temps béni où ils servaient à la mise en page alors que, la finalité du tag \u003Cb><table>\u003C/b> a toujours été de présenter des DONNéES TABULAIRES.\u003C/p>\n\n\u003Cdiv class=\"responsive-iframe article-image\">\n\u003Ciframe src=\"/wp-content/stuff/antique-website/index.html\">\u003C/iframe>\n\u003Cdiv class=\"image-legend\">Le web c'était mieux avant\u003C/div>\n\u003C/div>\n\n\u003Cp>Avec les attributs qui-sentent-la-cave de \u003Cb>table\u003C/b> comme \u003Ci>cellspacing\u003C/i> ou \u003Ci>cellpadding\u003C/i> on pouvait même se passer de CSS pour créer une mise en page bien moche mais qui tient vaguement la route.\u003C/p>\n\n\u003Cp>Soit. Revenons à nos \u003Cabbr title=\"le nom latin du mouton - l'auteur essaye d'avoir l'air intelligent, désolé\">Ovis\u003C/abbr> et la second question existentielle: \u003Ci>qui présente des données tabulaires sur son site?\u003C/i>\u003C/p>\n\n\u003Cp>Même les gens qui devraient le faire utilisent plutôt des listes à puces ou des images.\u003C/p>\n\n\u003Cp>On vit d'ailleurs à une bonne vieille époque où tu peux demander à une IA de te générer un vieux visuel avec des erreurs dedans mais bon les gens vont pas les voir donc tu le poste quand même sur les réseaux sociaux en espérant attirer les commentaires \"ah oui, très instructif!\" et enfin devenir populaire avec les mamys sur Facebook.\u003C/p>\n\n\u003Cp>Ceci dit, le(s) gros coupable(s) de pourquoi les tableaux ça craint encore plus que le manque cuisant de bidets dans les toilettes de mon pays, ce sont les téléphones mobiles.\u003C/p>\n\n\u003Cp>Vous avez déjà essayé de présenter des \u003Cb>DONNéES TABULAIRES\u003C/b> sur une largeur de 4 centimètres?\u003C/p>\n\n\u003Cp>On peut pas faire rentrer beaucoup de \u003Ci>données tabulaires\u003C/i> là dedans avant que ça déborde. Non sérieusement, même mon aspicot rentre pas là dedans.\u003C/p>\n\n\u003Cdiv class=\"card-panel z-depth-3 article-image center-image\" style=\"max-width: 500px\">\n\u003Cimg-lightbox>\n\u003Ca href=\"/wp-content/stuff/table-ellipsis/aspicot.png\" target=\"_blank\">\u003Cimg src=\"/wp-content/stuff/table-ellipsis/aspicot.png\" alt=\"capture écran de Pokémon Go avec le professeur machin qui commente que mon aspicot est... Colossal\" class=\"responsive-img\">\u003C/a>\n\u003C/img-lightbox>\n\u003Cdiv class=\"image-legend\">Oui bon, pas besoin d'exagérer hein\u003C/div>\n\u003C/div>\n\n\u003Cp>Voilà un autre caillou à ajouter dans mon gros sac de \u003Ca href=\"/breves/97\" target=\"_blank\" rel=\"noopener noreferrer\">de raisons de détester le web design à cause des téléphones mobiles\u003C/a>.\u003C/p>\n\n\u003Cp>Oui je sais, les gens normaux c'est à cause du CSS. Mais moi j'aime bien le CSS.\u003C/p>\n\n\u003Cp>J'en suis arrivé à développer quelques solutions.\u003C/p>\n\n\u003Cp>Déjà, il y a la solution en place sur le présent blog, que j'ai pas inventée et qui est juste mieux que celle que je vais expliquer dans cet article.\u003C/p>\n\n\u003Cp>Elle consiste à RETOURNER LE TABLEAU sur mobile. C'est-à-dire que les intitulés de colonnes se retrouvent chacun sur une ligne différente tout à gauche, puis suivent les données.\u003C/p>\n\n\u003Cdiv class=\"card-panel z-depth-3 article-image center-image\" style=\"max-width: 579px\">\n\u003Cimg-lightbox>\n\u003Ca href=\"/wp-content/stuff/table-ellipsis/tableau_a_lenvers.png\" target=\"_blank\">\u003Cimg src=\"/wp-content/stuff/table-ellipsis/tableau_a_lenvers.png\" alt=\"Montre un tableau sur un écran de petite largeur sur le présent blog, il est inversé en terme de lignes et colonnes\" class=\"responsive-img\">\u003C/a>\n\u003C/img-lightbox>\n\u003Cdiv class=\"image-legend\">En fait, les colonnes sont devenues des lignes. OK j'explique super mal mais vous avez compris\u003C/div>\n\u003C/div>\n\n\u003Cp>Ici, je vous présente une alternative super originale qui consiste à détecter avec du JavaScript si du texte déborde, auquel cas on ajoute un petit bouton discret permettant de révéler l'entièreté du contenu dans un bidule flottant.\u003C/p>\n\n\u003Cp>Chouette idée ou quoi?\u003C/p>\n\n\u003Cp>Je vous montre déjà la démo, comme ça, si vous êtes déçus, vous pouvez retourner fissa sur TikTok et lamenter ces quelques minutes de carburant solaire perdues sur ce blog que vous aviez juré de ne plus ouvrir à nouveau, mais c'est plus fort que vous même si ça manque de tutos de dessin de sous-vêtements en SVG ces temps-ci.\u003C/p>\n\n\u003Cdiv class=\"responsive-iframe article-image\">\n\u003Ciframe src=\"/wp-content/stuff/norobots/table-ellipsis/index.html\">\u003C/iframe>\n\u003Cdiv class=\"image-legend\">Ouch\u003C/div>\n\u003C/div>\n\n\u003Cp>Ah ouais quand même, c'est beau comme un cyber-truck dis-moi.\u003C/p>\n\n\u003Ch2>Les explications et le code\u003C/h2>\n\u003Cp>Le code vous pouvez déjà le voler en cliquant droit sur la démo plus haut puis afficher la source, enregistrer-sous ou que sais-je.\u003C/p>\n\n\u003Cp>On a besoin:\u003C/p>\n\u003Cul>\n  \u003Cli>D'un tableau avec une largeur fixe; C'est moins simple à créer que ça en a l'air, l'attribut étrange \u003Cb>table-layout: fixed;\u003C/b> est parfois nécessaire et j'ai appris son existence ce matin;\u003C/li>\n  \u003Cli>De certaines cellules marquées d'une classe CSS particulière (enfin c'est comme ça que je vais procéder mais le monde est votre huitre);\u003C/li>\n  \u003Cli>Ces cellules doivent avoir certaines propriétés CSS comme par exemple \u003Cb>text-overflow: ellipsis\u003C/b>.\u003C/li>\n\u003C/ul>\n\n\u003Cp>Voici un exemple de classe CSS sus-mentionnée que je n'applique donc qu'à certaines colonnes mais on pourrait les appliquer à toutes:\u003C/p>\n\n\u003Cpre class=\"shiki shiki-themes catppuccin-latte kanagawa-wave\" style=\"background-color:#eff1f5;--shiki-dark-bg:#1F1F28;color:#4c4f69;--shiki-dark:#DCD7BA\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#DF8E1D;--shiki-dark:#E6C384\">expandable-cell\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#1E66F5;--shiki-dark:#7AA89F\">  white-space\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">:\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#FFA066\"> nowrap\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#1E66F5;--shiki-dark:#7AA89F\">  overflow\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">:\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#FFA066\"> hidden\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#1E66F5;--shiki-dark:#7AA89F\">  text-overflow\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">:\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#FFA066\"> ellipsis\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\u003C/code>\u003C/pre>\n\n\u003Cp>Avec ça les cellules qui débordent de texte se retrouvent avec des \"...\" à la fin de la ligne avec le contenu débordant retiré.\u003C/p>\n\n\u003Cp>Pour afficher le texte complet je décide d'utiliser \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog\" target=\"_blank\" rel=\"noopener noreferrer\">l'élément natif \u003Cb>dialog\u003C/b>\u003C/a> parce qu'il existe et que tout le monde s'en fout.\u003C/p>\n\n\u003Cpre class=\"shiki shiki-themes catppuccin-latte kanagawa-wave\" style=\"background-color:#eff1f5;--shiki-dark-bg:#1F1F28;color:#4c4f69;--shiki-dark:#DCD7BA\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"><\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">dialog\u003C/span>\u003Cspan style=\"color:#DF8E1D;--shiki-dark:#957FB8\"> id\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">=\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"expanded\"\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">dialog\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"><\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">main\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">  <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">table\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">    <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">thead\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">th\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Colonne 1\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">th\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">th\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Colonne 2\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">th\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">    </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">thead\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">    <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tbody\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Petit texte ici\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#DF8E1D;--shiki-dark:#957FB8\"> class\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">=\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"expandable-cell\"\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Pourquoi y a pas d'animations ici c'est un peu bizarre non\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Coucou\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#DF8E1D;--shiki-dark:#957FB8\"> class\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">=\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"expandable-cell\"\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Text court\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Encore un peu\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">        <\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#DF8E1D;--shiki-dark:#957FB8\"> class\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">=\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"expandable-cell\"\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">Lorem Ipsum Dolor Sit Amet La Baraka de Buratta de Barzotti\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">td\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">      </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tr\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">    </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">tbody\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">  </\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">table\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\"></\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-dark:#E6C384\">main\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\u003C/code>\u003C/pre>\n\n\u003Cp>Pour que le \u003Cb>dialog\u003C/b> apparaisse au bon endroit il faut virer (on dit \u003Ci>reset\u003C/i> dans le metier) le \u003Cb>margin:  auto;\u003C/b> qu'il reçoit du navigateur:\u003C/p>\n\n\u003Cpre class=\"shiki shiki-themes catppuccin-latte kanagawa-wave\" style=\"background-color:#eff1f5;--shiki-dark-bg:#1F1F28;color:#4c4f69;--shiki-dark:#DCD7BA\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">#expanded {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  /* Remove the margin auto thingy */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  margin: 0;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\u003C/code>\u003C/pre>\n\n\u003Cp>Et voici tout le JS:\u003C/p>\n\n\u003Cpre class=\"shiki shiki-themes catppuccin-latte kanagawa-wave\" style=\"background-color:#eff1f5;--shiki-dark-bg:#1F1F28;color:#4c4f69;--shiki-dark:#DCD7BA\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> expanded \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> document\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">querySelector\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"#expanded\"\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">const\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\"> hideExpandedCell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> ()\u003C/span>\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\"> =>\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> expanded\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">close\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-light-font-style:italic;--shiki-dark:#727169;--shiki-dark-font-style:inherit\">// Just close on any keypress:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">expanded\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">addEventListener\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"keydown\"\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">,\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> hideExpandedCell\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">const\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\"> setupExpandables\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> ()\u003C/span>\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\"> =>\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">  const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> expandables \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> document\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">querySelectorAll\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\".expandable-cell\"\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-light-font-weight:inherit;--shiki-dark:#957FB8;--shiki-dark-font-weight:bold\">  for\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\"> (\u003C/span>\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> cell \u003C/span>\u003Cspan style=\"color:#8839EF;--shiki-dark:#E6C384\">of\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> expandables\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-light-font-weight:inherit;--shiki-dark:#957FB8;--shiki-dark-font-weight:bold\">    if\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\"> (\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">cell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">offsetWidth\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> <\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> cell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">scrollWidth\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-light-font-style:italic;--shiki-dark:#727169;--shiki-dark-font-style:inherit\">      // Expandable cell.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-light-font-style:italic;--shiki-dark:#727169;--shiki-dark-font-style:inherit\">      // Set title attribute:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      cell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">title\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> cell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">textContent\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-light-font-style:italic;--shiki-dark:#727169;--shiki-dark-font-style:inherit\">      // Add the button:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">      const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> expLink \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> document\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">createElement\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">'img'\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      expLink\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">title\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> \"Show the full text\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      expLink\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">[\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"aria-label\"\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">]\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> \"Expand collapsed text\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      expLink\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">[\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"aria-role\"\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">]\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> \"button\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      expLink\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">className\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> \"table-icon\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      expLink\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">src\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> \"circle-plus.svg\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      expLink\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">addEventListener\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">'click'\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">,\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> (\u003C/span>\u003Cspan style=\"color:#E64553;--shiki-light-font-style:italic;--shiki-dark:#DCD7BA;--shiki-dark-font-style:inherit\">e\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">)\u003C/span>\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\"> =>\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\"> expandCell\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">e\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">))\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">      cell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">prepend\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">expLink\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">    }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">  }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  document\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">addEventListener\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"click\"\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">,\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> hideExpandedCell\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">const\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\"> expandCell\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> (\u003C/span>\u003Cspan style=\"color:#E64553;--shiki-light-font-style:italic;--shiki-dark:#DCD7BA;--shiki-dark-font-style:inherit\">e\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">)\u003C/span>\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\"> =>\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  e\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">stopPropagation\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  expanded\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">textContent\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> e\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">currentTarget\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">nextSibling\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">textContent\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">  const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> scrollTop \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> document\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">documentElement\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">scrollTop\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">  const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> textBoudingRect \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> e\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">currentTarget\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">getBoundingClientRect\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">  const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> newTop \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> textBoudingRect\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">bottom\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> +\u003C/span>\u003Cspan style=\"color:#FE640B;--shiki-dark:#D27E99\"> 5\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> +\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> scrollTop\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8839EF;--shiki-dark:#957FB8\">  const\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> newLeft \u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\">=\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> textBoudingRect\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">left\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  expanded\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">style\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">top\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> `\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">${\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">newTop\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">}\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">px`\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  expanded\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">style\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#E6C384\">left\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#E6C384\"> =\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\"> `\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">${\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">newLeft\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">}\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">px`\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">  expanded\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">show\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7C7F93;--shiki-light-font-style:italic;--shiki-dark:#727169;--shiki-dark-font-style:inherit\">// Initialize:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">setupExpandables\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\u003C/code>\u003C/pre>\n\n\u003Cp>Remarquez que ce bon vieux \u003Cb>dialog\u003C/b> ne se ferme pas tout seul en cliquant à côté, ni en pressant la touche \"Esc\".\u003C/p>\n\n\u003Cp>C'est pas un \"modal\" donc je crois que l'absence de réponse à \"Esc\" est normale, mais ils ont l'air de dire dans la doc que cliquer à côté devrait fonctionner.\u003C/p>\n\n\u003Cp>J'ai dû rater un truc. Ce sera pour un prochain glorieux article.\u003C/p>\n\n\u003Cp>Du coup j'ai l'événement \u003Ci>keydown\u003C/i> qui ferme le \u003Cb>dialog\u003C/b> pour \u003Cb>n'importe quelle touche\u003C/b>. Plus facile comme ça.\u003C/p>\n\n\u003Cp>La function \u003Cb>setupExpandables\u003C/b> qui ajoute tous les petits boutons doit aussi créer un plan foireux pour que cliquer en dehors du \u003Cb>dialog\u003C/b> le ferme:\u003C/p>\n\n\u003Cpre class=\"shiki shiki-themes catppuccin-latte kanagawa-wave\" style=\"background-color:#eff1f5;--shiki-dark-bg:#1F1F28;color:#4c4f69;--shiki-dark:#DCD7BA\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\">document\u003C/span>\u003Cspan style=\"color:#179299;--shiki-dark:#9CABCA\">.\u003C/span>\u003Cspan style=\"color:#1E66F5;--shiki-light-font-style:italic;--shiki-dark:#7E9CD8;--shiki-dark-font-style:inherit\">addEventListener\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">(\u003C/span>\u003Cspan style=\"color:#40A02B;--shiki-dark:#98BB6C\">\"click\"\u003C/span>\u003Cspan style=\"color:#7C7F93;--shiki-dark:#9CABCA\">,\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#DCD7BA\"> hideExpandedCell\u003C/span>\u003Cspan style=\"color:#4C4F69;--shiki-dark:#9CABCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\u003C/code>\u003C/pre>\n\n\u003Cp>Dans \u003Cb>setupExpandables\u003C/b>, on parcourt aussi toutes les cellules concernées par ce fantastique plan pour tester \u003Cb>SI LE TEXTE DEPASSE\u003C/b>.\u003C/p>\n\n\u003Cp>Comment qu'on fait ça demandez-vous?\u003C/p>\n\n\u003Cp>J'ai découvert quelque part que si la propriété \u003Cb>offsetWidth\u003C/b> de la cellule est plus petite que \u003Cb>scrollWidth\u003C/b>, ben euh... Ça déborde. Apparemment. Cool.\u003C/p>\n\n\u003Cp>Il s'agit ensuite de créer un élément \u003Cb>img\u003C/b> et utiliser ça comme bouton. Pourquoi pas créer un bouton avec une image dedans? Parce que ça prend 15 lignes en plus.\u003C/p>\n\n\u003Cp>Le \"bouton\" affiche le \u003Cb>dialog\u003C/b> juste en dessous de la cellule en copiant son \u003Cb>textContent\u003C/b>.\u003C/p>\n\n\u003Cp>Voilà c'est super hein.\u003C/p>\n\n\u003Cp>On pourrait aussi utiliser \u003Cb>innerHTML\u003C/b> et copier tout le HTML. On pourrait aussi aller prendre l'air.\u003C/p>\n\n\u003Ch2>Et euh, pourquoi le bouton il est pas derrière le texte?\u003C/h2>\n\n\u003Cp>Oui. Pourquoi c'est pas comme ça:\u003C/p>\n\n\u003Cdiv class=\"card-panel z-depth-3 article-image center-image\" style=\"max-width: 213px\">\n\u003Cimg-lightbox>\n\u003Ca href=\"/wp-content/stuff/table-ellipsis/table-pq.png\" target=\"_blank\">\u003Cimg src=\"/wp-content/stuff/table-ellipsis/table-pq.png\" alt=\"Une cellule du tableau avec l'image "+" sur la droite au lieu de la gauche\" class=\"responsive-img\">\u003C/a>\n\u003C/img-lightbox>\n\u003Cdiv class=\"image-legend\">Ah oui c'est mieux comme ça\u003C/div>\n\u003C/div>\n\n\u003Cp>Malheureusement, si on essaye de mettre le bouton à droite du texte il n'apparait plus, parce qu'il est dans la partie qui \u003Ci>overflow\u003C/i> derrière les trois petits points.\u003C/p>\n\n\u003Cp>On est obligés de le mettre devant.\u003C/p>\n\n\u003Cp>J'avais dit que ce plan était un peu pourri.\u003C/p>\n\n\u003Cp>Une possible alternative serait de rendre le texte cliquable (clickable? Qu'on peut cliquer dessus) en le transformant en genre de lien plutôt que d'ajouter un bouton. Ou ajouter un bouton mais au dessus.\u003C/p>\n\n\u003Cp>Je vous laisse rendre tout ça moins médiocre et vous montre l'horreur une dernière fois:\u003C/p>\n\n\u003Cdiv class=\"responsive-iframe article-image\">\n\u003Ciframe src=\"/wp-content/stuff/norobots/table-ellipsis/index.html\">\u003C/iframe>\n\u003C/div>\n\n\u003Cp>Utilisez \"afficher la source\" pour révéler le code 100% bio sans IA.\u003C/p>\n",[],{"readingTimeStr":15,"toc":16},"7 minutes de lecture (facile)","",1777313462091]