Comme il n’y avait pas besoin d’autres tableaux sur le site, nous avons d\u00e9cid\u00e9 d’utiliser une combinaison simple de CSS et d’HTML pour obtenir l’effet souhait\u00e9.<\/p>\n
Un autre avantage d’utiliser votre propre code plut\u00f4t que de vous fier \u00e0 un plugin pr\u00eat \u00e0 l’emploi est que vous pouvez modifier le texte et l’apparence en fonction de la taille de la fen\u00eatre du navigateur. Par exemple, le tableau complet (voir ci-dessous) comporte trois en-t\u00eates de colonnes clairs et du texte dans les colonnes de pied de page qui se rapportent \u00e0 ces colonnes individuelles (par exemple, \u00ab Mauvaises surprises \u00bb appartient \u00e0 la colonne \u00ab Concurrent type \u00bb et non \u00e0 mon client).<\/p>\n
![\"Screenshot](\"https:\/\/dmjcomputerservices.com\/fr\/wp-content\/uploads\/2014\/01\/WordPress-responsive-table-in-css.gif\" "\\"\\"")
<\/p>\n
Lorsque l’affichage est r\u00e9duit sur un appareil mobile, le visiteur risque de ne pas en saisir toute la signification. Nous devions donc trouver un moyen de rendre la mise en page plus pertinente.<\/p>\n
Nous avons cod\u00e9 notre solution responsive HTML et CSS afin de supprimer les en-t\u00eates de colonne \u00ab Concurrent type \u00bb et \u00ab La m\u00e9thode Verbatim \u00bb et de les ajouter au d\u00e9but du texte de chaque colonne pour chaque champ individuel. Nous avons fait la m\u00eame chose pour le texte du pied de page afin de remplacer les colonnes distinctes intitul\u00e9es \u00ab Pas de frais cach\u00e9s \u00bb et \u00ab Pas de mauvaises surprises \u00bb par une seule ligne de texte indiquant \u00ab Pas de frais cach\u00e9s et pas de mauvaises surprises \u00bb.<\/p>\n
Voici \u00e0 quoi ressemble ce m\u00eame tableau pour les utilisateurs mobiles…<\/p>\n
![\"Screenshot](\"https:\/\/dmjcomputerservices.com\/fr\/wp-content\/uploads\/2014\/01\/Responsive-table-built-with-HTML-and-CSS-for-addition-into-a-WordPress-site.gif\" "\\"\\"")
<\/p>\n
Le Codage<\/span><\/h2>\nNotre client peut facilement ajouter des colonnes \u00e0 son tableau. Ainsi, si vous avez un client qui est pr\u00eat \u00e0 fournir un peu plus d’efforts manuels pour maintenir ses pages, une solution HTML et CSS con\u00e7ue sur mesure pourrait \u00eatre la solution la plus appropri\u00e9e.<\/p>\n
Voici quelques captures d’\u00e9cran pour vous aider \u00e0 d\u00e9marrer si vous souhaitez faire quelque chose de similaire vous-m\u00eame. Tout d’abord, une partie du code HTML que nous avons ajout\u00e9e \u00e0 la page…<\/p>\n
![\"Screenshot](\"https:\/\/dmjcomputerservices.com\/fr\/wp-content\/uploads\/2014\/01\/HTML-sample-for-responsive-table1.gif\" "\\"\\"")
<\/p>\n
… et voici un extrait du CSS. Comme vous pouvez le voir, le point essentiel est l’utilisation intelligente de \u00ab display:none; \u00bb pour chaque bloc m\u00e9dia afin de d\u00e9cider quelle partie du code HTML sera affich\u00e9e en fonction de la largeur de l’\u00e9cran…<\/p>\n
![\"Screenshot](\"https:\/\/dmjcomputerservices.com\/fr\/wp-content\/uploads\/2014\/01\/CSS-sample-for-responsive-table-display-in-WordPress.gif\" "\\"\\"")
<\/p>\n
Et voil\u00e0. Tout cela a \u00e9t\u00e9 r\u00e9alis\u00e9 \u00e0 l’aide d’une simple combinaison de HTML et de CSS. Si vous ne vous sentez pas suffisamment \u00e0 l’aise pour effectuer ce travail vous-m\u00eame, n’h\u00e9sitez pas \u00e0 nous contacter et \u00e0 nous demander un devis pour le r\u00e9aliser \u00e0 votre place.<\/p>\n
<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
Avez-vous du mal \u00e0 bien faire fonctionner vos tableaux responsive dans WordPress ? Nous avons r\u00e9cemment mis en place une solution CSS\/HTML personnalis\u00e9e et facile \u00e0 g\u00e9rer pour vous, en \u00e9vitant l’utilisation de plugins.<\/p>\n","protected":false},"author":23,"featured_media":7180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"One of our clients wanted a couple of tables to appear on their pricing page to deliver a clear comparison between their offering and that of their typical competitors.\r\n
Responsive tables in WordPress - Should we use a table plugin or HTML \/ CSS?<\/h2>\r\nWe tried various plugins (such as\u00a0Tablepress<\/a>\u00a0and\u00a0WP Pricing Tables), but had a few problems with them - they weren't completely responsive (meaning that they didn't display well on mobile devices) and the row \/ column formatting went a bit weird on several browsers, especially when a column had more lines of text than other columns in the same row.\r\n\r\nAs there was no other need for tables on the site we decided to implement a combination of CSS and simple HTML to deliver the desired effect.\r\n\r\n[box type=\"note\"]Whilst plugins are often a good idea, as they offer a solution that can be managed by website owners and which are regularly updated by the plugin authors, they can sometimes 'bloat' a website with unnecessary code that impacts performance. They can also conflict with other plugins, and pose security risks if they are not updated or if they come from an unreliable source.[\/box]\r\n\r\nAnother advantage of using your own code, rather than relying on a ready-made plugin, is that you can vary the text and appearance depending on the size of the browser window. For example, the full size desktop table (see below) has 3 clear column headings and text in the footer columns that relate to those individual column (e.g. 'Nasty Surprises' belong to the 'Typical competitor' column and not to my client).\r\n\r\n\r\n\r\nWhen reduced down on a mobile device the significance of that could get lost on the visitor, so we need to find a way of making the layout more relevant.\r\n\r\nWe coded our responsive html and css solution to remove the column heading 'Typical Competitor' and 'The Verbatim Way' and add them to the front of the column text on each individual field. We did something similar for the footer text so that instead of having separate columns saying 'No Hidden Extras' and 'Nasty Surprises' we had a single text string saying 'No hidden extras and no nasty surprises'.\r\n\r\nHere's how that same table looks for mobile users...\r\n\r\n\r\nThe Coding<\/span><\/h2>\r\nOur client can easily add more rows to his table.\u00a0<\/span>So, if you have a client who is willing and able to do a little more manual effort to maintain his pages, a hand-crafted HTML and CSS solution might be the most appropriate way to go.\r\n\r\nHere are a couple of screenshots to help you get started if you wanted to do something similar yourselves. First a section of the html we added to the page....\r\n\r\n\r\n\r\n...and\u00a0, and here is a segment of the CSS. As you can see the key point is the smart use of 'display:none;' for each media block to decide which bit of html gets displayed depending on the screen width...\r\n\r\n\r\n\r\nSo there it is. All done with a simple combination of HTML and CSS. If you don't feel confident enough to do this work yourself, please do get in touch and ask us to quote for doing it for you.\r\n\r\n\u00a0","_et_gb_content_width":"","footnotes":""},"categories":[66],"tags":[],"class_list":["post-3697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/posts\/3697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/comments?post=3697"}],"version-history":[{"count":0,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/posts\/3697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/media\/7180"}],"wp:attachment":[{"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/media?parent=3697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/categories?post=3697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/tags?post=3697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n<\/p>\n\r\n\r\nWhen reduced down on a mobile device the significance of that could get lost on the visitor, so we need to find a way of making the layout more relevant.\r\n\r\nWe coded our responsive html and css solution to remove the column heading 'Typical Competitor' and 'The Verbatim Way' and add them to the front of the column text on each individual field. We did something similar for the footer text so that instead of having separate columns saying 'No Hidden Extras' and 'Nasty Surprises' we had a single text string saying 'No hidden extras and no nasty surprises'.\r\n\r\nHere's how that same table looks for mobile users...\r\n\r\n\r\n