{"id":124703,"date":"2019-01-02T18:02:01","date_gmt":"2019-01-02T17:02:01","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-fluid-table\/"},"modified":"2025-02-03T16:44:33","modified_gmt":"2025-02-03T15:44:33","slug":"create-a-fluid-table","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/creer-un-tableau-fluide","title":{"rendered":"Cr\u00e9er un tableau fluide"},"content":{"rendered":"<p>Un tableau fluide est un moyen simple d&rsquo;ajouter de nombreux \u00e9l\u00e9ments \u00e0 l&rsquo;\u00e9cran et de les r\u00e9partir de mani\u00e8re homog\u00e8ne et r\u00e9active. <video style=\"max-width:820px; width:100%; padding:20px 0px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.png\" alt=\"Widget de table fluide\">Widget de tableau fluide<\/source><\/video><br \/>\nVoici comment en cr\u00e9er un :<\/p>\n<ol>\n<li>Faites glisser un widget Table sur le Canvas.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15166\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget.png\" alt=\"Widget pour tablette\" width=\"755\" height=\"401\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget.png 1640w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-300x159.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-768x407.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-1024x543.png 1024w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/li>\n<li>Modifiez ses colonnes et ses lignes pour refl\u00e9ter les diff\u00e9rents espaces o\u00f9 vous souhaitez placer des \u00e9l\u00e9ments. Dans notre exemple, notre tableau sert de pied de page, nous avons donc deux colonnes et une ligne. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15167\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/ColumnsandRows.png\" alt=\"Colonnes et lignes\" width=\"755\" height=\"410\"><\/li>\n<li>Comme notre tableau est un pied de page, placez-le en bas de l&rsquo;\u00e9cran et fixez sa largeur \u00e0 100 %.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15168\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/PinandWidth.png\" alt=\"Tableau des broches et largeur en pourcentage\" width=\"755\" height=\"403\"><\/li>\n<li>Dans la cellule 1, modifiez sa disposition en vertical, puis faites glisser deux widgets Texte dans la cellule. L&rsquo;un d&rsquo;eux sera automatiquement plac\u00e9 au-dessus de l&rsquo;autre. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15169\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/DragTextWidgets.png\" alt=\"Faites glisser les widgets de texte\" width=\"755\" height=\"408\"><\/li>\n<li>Dans la cellule 2, modifiez sa mise en page pour qu&rsquo;elle soit horizontale et son alignement pour qu&rsquo;il soit centr\u00e9. Modifiez l&rsquo;espacement horizontal en le fixant \u00e0 30. Faites glisser quelques ic\u00f4nes et un widget Bouton dans cette cellule. Ils seront automatiquement plac\u00e9s l&rsquo;un \u00e0 c\u00f4t\u00e9 de l&rsquo;autre avec un espace de 30 px entre eux.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15171\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/CellLayout.png\" alt=\"Disposition des cellules\" width=\"755\" height=\"401\"><\/li>\n<li>S\u00e9lectionnez le widget Bouton et modifiez sa largeur \u00e0 37 %. Vous pouvez \u00e9galement ajouter une marge autour du bouton si vous souhaitez qu&rsquo;il soit plus espac\u00e9 des ic\u00f4nes. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15172\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/CellWidth.png\" alt=\"Largeur de la cellule\" width=\"755\" height=\"403\"><\/li>\n<li>Le bouton \u00e9tant toujours s\u00e9lectionn\u00e9, cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Window Resize\u00a0\u00bb + \u00ab\u00a0Hide\u00a0\u00bb et s\u00e9lectionnez le bouton comme cible \u00e0 masquer.\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761873\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Cr\u00e9ez une condition pour cette action, afin que le bouton ne soit masqu\u00e9 que lorsque l&rsquo;\u00e9cran est trop petit. Cliquez sur le texte \u00ab\u00a0Ajouter une condition\u00a0\u00bb. Le g\u00e9n\u00e9rateur d&rsquo;expressions conditionnelles appara\u00eet. Suivez les \u00e9tapes suivantes pour cr\u00e9er la condition :\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761896\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><strong>1.<\/strong> Cliquez sur l&rsquo;onglet \u00ab\u00a0Constantes\u00a0\u00bb. Faites glisser l&rsquo;ic\u00f4ne \u00ab\u00a0Largeur de la fen\u00eatre\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression <strong>. 2.<\/strong> Cliquez sur l&rsquo;onglet \u00ab\u00a0Fonctions\u00a0\u00bb et regardez la section \u00ab\u00a0Comparateurs\u00a0\u00bb. Faites glisser l&rsquo;ic\u00f4ne \u00ab\u00a0Moins que\u00a0\u00bb (&lsquo;&lt;&lsquo;) \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne \u00ab\u00a0Largeur de la fen\u00eatre\u00a0\u00bb <strong>. 3.<\/strong> Enfin, dans l&rsquo;espace libre qui appara\u00eet \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne \u00ab\u00a0Moins que\u00a0\u00bb (&lsquo;&lt;&lsquo;), double-cliquez et tapez 900 <strong>4.<\/strong> Cliquez sur OK pour terminer la construction de la condition. <\/p>\n<\/li>\n<li>Cliquez sur le texte \u00ab\u00a0Else\u00a0\u00bb, ce qui ouvrira la bo\u00eete de dialogue Events. Cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0Sur redimensionnement de la fen\u00eatre\u00a0\u00bb + \u00ab\u00a0Afficher\u00a0\u00bb et s\u00e9lectionnez le bouton comme cible \u00e0 afficher. Cliquez sur OK pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. Il n&rsquo;est pas n\u00e9cessaire de cr\u00e9er une condition pour cet \u00e9v\u00e9nement.\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761932\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Voil\u00e0, c&rsquo;est fait ! Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et modifiez la largeur de la fen\u00eatre pour voir votre table fluide fonctionner. <\/p>\n<div><strong>Remarque :<\/strong> les param\u00e8tres de la simulation doivent \u00eatre r\u00e9gl\u00e9s de mani\u00e8re \u00e0 ce que la largeur du navigateur s&rsquo;\u00e9tende. Vous pouvez le sp\u00e9cifier dans les param\u00e8tres de simulation ou dans la fen\u00eatre de simulation. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Param\u00e8tres de simulation\" width=\"755\" height=\"491\"><br \/>\nVous pouvez <a href=\"https:\/\/s3-eu-west-1.amazonaws.com\/justinmind\/examples\/FluidTable.vp\">t\u00e9l\u00e9charger notre exemple ici.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un tableau fluide est un moyen simple d&rsquo;ajouter de nombreux \u00e9l\u00e9ments \u00e0 l&rsquo;\u00e9cran et de les r\u00e9partir de mani\u00e8re homog\u00e8ne et r\u00e9active. Widget de tableau fluide&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8441],"tags":[],"class_list":["post-124703","post","type-post","status-publish","format-standard","hentry","category-formation","category-prototypage-reactif"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124703"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124703"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124703\/revisions"}],"predecessor-version":[{"id":126163,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124703\/revisions\/126163"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}