{"id":3696,"date":"2014-04-03T20:53:36","date_gmt":"2014-04-03T20:53:36","guid":{"rendered":"https:\/\/dmjcomputerservices.com\/fr\/?post_type=recent-projects&#038;p=3696"},"modified":"2026-04-09T15:17:19","modified_gmt":"2026-04-09T14:17:19","slug":"installer-tableaux-responsive-sur-site-wordpress-du-client","status":"publish","type":"post","link":"https:\/\/dmjcomputerservices.com\/fr\/blog\/installer-tableaux-responsive-sur-site-wordpress-du-client\/","title":{"rendered":"Installer des tableaux responsive sur le site WordPress de notre client"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Notre client souhaitait que quelques tableaux apparaissent sur sa page de prix afin de permettre une comparaison claire entre son offre et celle de ses concurrents habituels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons essay\u00e9 plusieurs plugins (tels que <a href=\"https:\/\/wpmarmite.com\/tablepress\/\" target=\"_blank\" rel=\"noreferrer noopener\">TablePress<\/a> et WP Pricing Tables), mais nous avons rencontr\u00e9 quelques probl\u00e8mes avec ceux-ci : ils n&rsquo;\u00e9taient pas enti\u00e8rement adaptatifs (c&rsquo;est-\u00e0-dire qu&rsquo;ils ne s&rsquo;affichaient pas correctement sur les appareils mobiles) et la mise en forme des lignes et des colonnes pr\u00e9sentait des anomalies sur plusieurs navigateurs, en particulier lorsqu&rsquo;une colonne comportait plus de lignes de texte que les autres colonnes de la m\u00eame ligne.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comme le site ne n\u00e9cessitait pas d&rsquo;autres tableaux, nous avons d\u00e9cid\u00e9 d&rsquo;utiliser une combinaison de CSS et de HTML simple pour obtenir l&rsquo;effet souhait\u00e9. Si les plugins sont souvent une bonne id\u00e9e, car ils offrent une solution g\u00e9rable par les propri\u00e9taires de sites web et r\u00e9guli\u00e8rement mise \u00e0 jour par leurs auteurs, ils peuvent parfois \u00ab alourdir \u00bb un site avec du code inutile qui nuit aux performances, entrer en conflit avec d&rsquo;autres plugins et pr\u00e9senter un risque de s\u00e9curit\u00e9 s&rsquo;ils ne sont pas mis \u00e0 jour ou s&rsquo;ils proviennent d&rsquo;une source peu fiable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons r\u00e9dig\u00e9 un article de blog complet qui explique <a title=\"Create responsive tables in WordPress\" href=\"https:\/\/dmjcomputerservices.com\/fr\/blog\/tableaux-responsive-sur-sites-wordpress\/\">comment cr\u00e9er des tableaux responsive sur votre site WordPress<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ainsi, si vous avez un client qui est pr\u00eat \u00e0 s&rsquo;investir un peu plus dans la maintenance de ses pages, une solution HTML et CSS personnalis\u00e9e pourrait \u00eatre la plus appropri\u00e9e. N&rsquo;h\u00e9sitez pas \u00e0 nous contacter !<\/p>\n\n\n<script>\nvar gform;gform||(document.addEventListener(\"gform_main_scripts_loaded\",function(){gform.scriptsLoaded=!0}),document.addEventListener(\"gform\/theme\/scripts_loaded\",function(){gform.themeScriptsLoaded=!0}),window.addEventListener(\"DOMContentLoaded\",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,themeScriptsLoaded:!1,isFormEditor:()=>\"function\"==typeof InitializeEditor,callIfLoaded:function(o){return!(!gform.domLoaded||!gform.scriptsLoaded||!gform.themeScriptsLoaded&&!gform.isFormEditor()||(gform.isFormEditor()&&console.warn(\"The use of gform.initializeOnLoaded() is deprecated in the form editor context and will be removed in Gravity Forms 3.1.\"),o(),0))},initializeOnLoaded:function(o){gform.callIfLoaded(o)||(document.addEventListener(\"gform_main_scripts_loaded\",()=>{gform.scriptsLoaded=!0,gform.callIfLoaded(o)}),document.addEventListener(\"gform\/theme\/scripts_loaded\",()=>{gform.themeScriptsLoaded=!0,gform.callIfLoaded(o)}),window.addEventListener(\"DOMContentLoaded\",()=>{gform.domLoaded=!0,gform.callIfLoaded(o)}))},hooks:{action:{},filter:{}},addAction:function(o,r,e,t){gform.addHook(\"action\",o,r,e,t)},addFilter:function(o,r,e,t){gform.addHook(\"filter\",o,r,e,t)},doAction:function(o){gform.doHook(\"action\",o,arguments)},applyFilters:function(o){return gform.doHook(\"filter\",o,arguments)},removeAction:function(o,r){gform.removeHook(\"action\",o,r)},removeFilter:function(o,r,e){gform.removeHook(\"filter\",o,r,e)},addHook:function(o,r,e,t,n){null==gform.hooks[o][r]&&(gform.hooks[o][r]=[]);var d=gform.hooks[o][r];null==n&&(n=r+\"_\"+d.length),gform.hooks[o][r].push({tag:n,callable:e,priority:t=null==t?10:t})},doHook:function(r,o,e){var t;if(e=Array.prototype.slice.call(e,1),null!=gform.hooks[r][o]&&((o=gform.hooks[r][o]).sort(function(o,r){return o.priority-r.priority}),o.forEach(function(o){\"function\"!=typeof(t=o.callable)&&(t=window[t]),\"action\"==r?t.apply(null,e):e[0]=t.apply(null,e)})),\"filter\"==r)return e[0]},removeHook:function(o,r,t,n){var e;null!=gform.hooks[o][r]&&(e=(e=gform.hooks[o][r]).filter(function(o,r,e){return!!(null!=n&&n!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][r]=e)}});\n<\/script>\n\n                <div class='gf_browser_gecko gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework' data-form-theme='legacy' data-form-index='0' id='gform_wrapper_2' ><div id='gf_2' class='gform_anchor' tabindex='-1'><\/div><form method='post' enctype='multipart\/form-data' target='gform_ajax_frame_2' id='gform_2'  action='\/fr\/wp-json\/wp\/v2\/posts\/3696#gf_2' data-formid='2' novalidate>\n                        <div class='gform-body gform_body'><ul id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_below validation_below'><li id=\"field_2_7\" class=\"gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_7'>LinkedIn<\/label><div class='ginput_container'><input name='input_7' id='input_2_7' type='text' value='' autocomplete='new-password'\/><\/div><div class='gfield_description' id='gfield_description_2_7'>Ce champ n\u2019est utilis\u00e9 qu\u2019\u00e0 des fins de validation et devrait rester inchang\u00e9.<\/div><\/li><li id=\"field_2_1\" class=\"gfield gfield--type-name gf_inline field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label gfield_label_before_complex' >Nom<\/label><div class='ginput_complex ginput_container ginput_container--name no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gform-grid-row' id='input_2_1'>\n                            \n                            <span id='input_2_1_3_container' class='name_first gform-grid-col gform-grid-col--size-auto' >\n                                                    <input type='text' name='input_1.3' id='input_2_1_3' value=''   aria-required='false'     \/>\n                                                    <label for='input_2_1_3' class='gform-field-label gform-field-label--type-sub '>Pr\u00e9nom<\/label>\n                                                <\/span>\n                            \n                            <span id='input_2_1_6_container' class='name_last gform-grid-col gform-grid-col--size-auto' >\n                                                    <input type='text' name='input_1.6' id='input_2_1_6' value=''   aria-required='false'     \/>\n                                                    <label for='input_2_1_6' class='gform-field-label gform-field-label--type-sub '>Nom<\/label>\n                                                <\/span>\n                            \n                        <\/div><\/li><li id=\"field_2_2\" class=\"gfield gfield--type-email gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_2'>E-mail<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='ginput_container ginput_container_email'>\n                            <input name='input_2' id='input_2_2' type='email' value='' class='medium'    aria-required=\"true\" aria-invalid=\"false\"  \/>\n                        <\/div><\/li><li id=\"field_2_3\" class=\"gfield gfield--type-text field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_3'>Sujet<\/label><div class='ginput_container ginput_container_text'><input name='input_3' id='input_2_3' type='text' value='' class='medium'      aria-invalid=\"false\"   \/><\/div><\/li><li id=\"field_2_4\" class=\"gfield gfield--type-textarea field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_4'>Comment pouvons-nous vous aider ?<\/label><div class='ginput_container ginput_container_textarea'><textarea name='input_4' id='input_2_4' class='textarea medium'      aria-invalid=\"false\"   rows='10' cols='50'><\/textarea><\/div><\/li><li id=\"field_2_5\" class=\"gfield gfield--type-checkbox gfield--type-choice field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label gfield_label_before_complex' >Voulez-vous recevoir notre newsletter ?<\/label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_2_5'><li class='gchoice gchoice_2_5_1'>\n\t\t\t\t\t\t\t\t<input class='gfield-choice-input' name='input_5.1' type='checkbox'  value='C&#039;est seulement si vous cochez cette case que nous serons autoris\u00e9s, en vertu du r\u00e8glement RGPD, \u00e0 utiliser vos donn\u00e9es pour vous envoyer des bulletins d&#039;information'  id='choice_2_5_1'   \/>\n\t\t\t\t\t\t\t\t<label for='choice_2_5_1' id='label_2_5_1' class='gform-field-label gform-field-label--type-inline'>C&rsquo;est seulement si vous cochez cette case que nous serons autoris\u00e9s, en vertu du r\u00e8glement RGPD, \u00e0 utiliser vos donn\u00e9es pour vous envoyer des bulletins d&rsquo;information<\/label>\n\t\t\t\t\t\t\t<\/li><\/ul><\/div><\/li><li id=\"field_2_6\" class=\"gfield gfield--type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  >Voici <a target=\"_blank\" href=\"https:\/\/dmjcomputerservices.com\/fr\/avis-de-confidentialite-et-cookies\/\">comment nous utiliserons les donn\u00e9es que vous nous fournirez<\/a>.<\/li><\/ul><\/div>\n        <div class='gform-footer gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' onclick='gform.submission.handleButtonClick(this);' data-submission-type='submit' value='Envoyez votre demande'  \/> <input type='hidden' name='gform_ajax' value='form_id=2&amp;title=&amp;description=&amp;tabindex=0&amp;theme=legacy&amp;styles={&quot;inputPrimaryColor&quot;:&quot;#204ce5&quot;}&amp;hash=02aa04f9e0136d05d66c71026ab6a02a' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submission_method' data-js='gform_submission_method_2' value='iframe' \/>\n            <input type='hidden' class='gform_hidden' name='gform_theme' data-js='gform_theme_2' id='gform_theme_2' value='legacy' \/>\n            <input type='hidden' class='gform_hidden' name='gform_style_settings' data-js='gform_style_settings_2' id='gform_style_settings_2' value='{&quot;inputPrimaryColor&quot;:&quot;#204ce5&quot;}' \/>\n            <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submit' value='2' \/>\n            \n            <input type='hidden' class='gform_hidden' name='gform_currency' data-currency='USD' value='dd4uxv6ysN9KezHqN6fWojs20V8VPBV0qOeGQhYCuyQtJUc5t43FgYBMAZUflX4GbjVz3mh1n+HLZtKj\/V7eFk1l2DZM8XPanwOomcfMhDS4hPw=' \/>\n            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' \/>\n            <input type='hidden' class='gform_hidden' name='state_2' value='WyJbXSIsIjZmZjQxOGU2NGNjMDBhMzMxMDlhYTc5NTA2MWQ0OGYyIl0=' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' \/>\n            <input type='hidden' name='gform_field_values' value='' \/>\n            \n        <\/div>\n                        <input type=\"hidden\" id=\"ct_checkjs_41f1f19176d383480afa65d325c06ed0\" name=\"ct_checkjs\" value=\"0\" \/><script >setTimeout(function(){var ct_input_name = \"ct_checkjs_41f1f19176d383480afa65d325c06ed0\";if (document.getElementById(ct_input_name) !== null) {var ct_input_value = document.getElementById(ct_input_name).value;document.getElementById(ct_input_name).value = document.getElementById(ct_input_name).value.replace(ct_input_value, '58176c0a8a611818a017837825add390f9ffecabeeec88aa81f413334898cbc6');}}, 1000);<\/script><input\n                    class=\"apbct_special_field apbct_email_id__gravity_form\"\n                    name=\"apbct__email_id__gravity_form\"\n                    aria-label=\"apbct__label_id__gravity_form\"\n                    type=\"text\" size=\"30\" maxlength=\"200\" autocomplete=\"off\"\n                    value=\"\"\n                \/><\/form>\n                        <\/div>\n\t\t                <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_2' id='gform_ajax_frame_2' title='Cette iframe contient la logique n\u00e9cessaire pour manipuler Gravity Forms avec Ajax.'><\/iframe>\n\t\t                <script>\ngform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https:\/\/dmjcomputerservices.com\/fr\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { \/* delay the scroll by 50 milliseconds to fix a bug in chrome *\/ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https:\/\/dmjcomputerservices.com\/fr\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger(\"gform_pre_post_render\", [{ formId: \"2\", currentPage: \"current_page\", abort: function() { this.preventDefault(); } }]);        if (event && event.defaultPrevented) {                return;        }        const gformWrapperDiv = document.getElementById( \"gform_wrapper_2\" );        if ( gformWrapperDiv ) {            const visibilitySpan = document.createElement( \"span\" );            visibilitySpan.id = \"gform_visibility_test_2\";            gformWrapperDiv.insertAdjacentElement( \"afterend\", visibilitySpan );        }        const visibilityTestDiv = document.getElementById( \"gform_visibility_test_2\" );        let postRenderFired = false;        function triggerPostRender() {            if ( postRenderFired ) {                return;            }            postRenderFired = true;            gform.core.triggerPostRenderEvents( 2, current_page );            if ( visibilityTestDiv ) {                visibilityTestDiv.parentNode.removeChild( visibilityTestDiv );            }        }        function debounce( func, wait, immediate ) {            var timeout;            return function() {                var context = this, args = arguments;                var later = function() {                    timeout = null;                    if ( !immediate ) func.apply( context, args );                };                var callNow = immediate && !timeout;                clearTimeout( timeout );                timeout = setTimeout( later, wait );                if ( callNow ) func.apply( context, args );            };        }        const debouncedTriggerPostRender = debounce( function() {            triggerPostRender();        }, 200 );        if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) {            const observer = new MutationObserver( ( mutations ) => {                mutations.forEach( ( mutation ) => {                    if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) {                        debouncedTriggerPostRender();                        observer.disconnect();                    }                });            });            observer.observe( document.body, {                attributes: true,                childList: false,                subtree: true,                attributeFilter: [ 'style', 'class' ],            });        } else {            triggerPostRender();        }    } );} );\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Vous avez du mal \u00e0 faire fonctionner vos tableaux responsive correctement dans WordPress ? D\u00e9couvrez une solution que nous avons r\u00e9alis\u00e9e pour un client, sans utiliser de plugins : l&rsquo;un de nos projets r\u00e9cents les plus modestes.<\/p>\n","protected":false},"author":23,"featured_media":7180,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[66],"tags":[],"class_list":["post-3696","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\/3696","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=3696"}],"version-history":[{"count":0,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/posts\/3696\/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=3696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/categories?post=3696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dmjcomputerservices.com\/fr\/wp-json\/wp\/v2\/tags?post=3696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}