{"id":1908,"date":"2025-03-11T09:10:10","date_gmt":"2025-03-11T09:10:10","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&#038;p=1908"},"modified":"2025-12-17T14:19:02","modified_gmt":"2025-12-17T14:19:02","password":"","slug":"make-table-responsive-wordpress","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/fr\/docs\/make-table-responsive-wordpress\/","title":{"rendered":"How To Make A Table Responsive"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Creating responsive tables in WordPress is a bit challenging. Even the default <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/support\/article\/table-block\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">table block<\/a> can&#8217;t handle it perfectly. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here at <a href=\"https:\/\/wptablebuilder.com\/fr\/\" class=\"rank-math-link\">Constructeur de tableaux WP<\/a>, we created a solution that lets you create responsive tables on any device. You can optimize the responsiveness in both mobile and tablet devices. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And the great part is,  it&#8217;s extremely easy. Here&#8217;s how to make a table responsive in WP Table Builder. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Make A Table Responsive<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve <a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/wptablebuilder.com\/fr\/docs\/create-first-table-wp-table-builder\/\" target=\"_blank\" class=\"rank-math-link\">created a table<\/a>, click on the &#8216;RESPONSIVE&#8217; tab. And click on the toggle beside &#8216;Enable Responsive Table&#8217;.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"644\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-35-50-1024x644.png\" alt=\"\" class=\"wp-image-20574\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-35-50-1024x644.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-35-50-300x189.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-35-50-768x483.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-35-50.png 1174w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now you need to setup your table for Mobile and Tablet devices. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At first, click on the &#8216;<strong>Mobile Icon<\/strong>&#8216; <strong>tab at the top (1)<\/strong> or<strong> &#8220;Mobile&#8221; at the left side (1)<\/strong> below the Breakpoints.. It will show you the default preview of the mobile responsive table.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"922\" height=\"598\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-40-08.png\" alt=\"\" class=\"wp-image-20575\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-40-08.png 922w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-40-08-300x195.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-40-08-768x498.png 768w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can optimize the table more to find which suits you need. <br><br>The very first thing you can do is, enabling the &#8216;Top Row As Header&#8217;. It will show the header and element of the column side-by-side.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"922\" height=\"594\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-44-47.png\" alt=\"\" class=\"wp-image-20577\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-44-47.png 922w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-44-47-300x193.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_12-44-47-768x495.png 768w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then the next option is &#8216;Static Top Row&#8217; which works like a charm when you have a gigantic table of 10+ rows. It keeps the header visible when enabled. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"658\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-56-43.png\" alt=\"\" class=\"wp-image-20578\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-56-43.png 916w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-56-43-300x216.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-56-43-768x552.png 768w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also change <strong>cell stack direction <\/strong>and <strong>Items per head<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-03-32-1024x617.png\" alt=\"\" class=\"wp-image-20579\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-03-32-1024x617.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-03-32-300x181.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-03-32-768x463.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-03-32.png 1242w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also change the responsiveness of the tablet version by clicking on the &#8216;<strong>Table<\/strong>&#8216; icon at the top or Tablet tab at the left side bar.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"605\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-59-29-1024x605.png\" alt=\"\" class=\"wp-image-20580\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-59-29-1024x605.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-59-29-300x177.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-59-29-768x453.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_14-59-29.png 1260w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But, if you want to <strong>display your table just the way it is<\/strong> regardless of any device screen size, enable the &#8220;<strong>Disable Breakpoint<\/strong>&#8221; option for both &#8216;MOBILE&#8217; and &#8216;TABLET&#8217; tab from the MODE OPTIONS.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-07-52-1024x726.gif\" alt=\"\" class=\"wp-image-20581\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-07-52-1024x726.gif 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-07-52-300x213.gif 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2024\/04\/2025-03-11_15-07-52-768x545.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hope it helps you to create responsive tables in WordPress. <\/p>","protected":false},"excerpt":{"rendered":"<p>Creating responsive tables in WordPress is a bit challenging. Even the default table block can&#8217;t handle it perfectly. Here at WP Table Builder, we created a solution that lets you create responsive tables on any device. You can optimize the responsiveness in both mobile and tablet devices. And the great part is, it&#8217;s extremely easy. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[7],"doc_tag":[],"class_list":["post-1908","docs","type-docs","status-publish","hentry","doc_category-configurations"],"year_month":"2026-08","word_count":282,"total_views":"0","reactions":{"happy":"0","normal":"1","sad":"0"},"author_info":{"name":"Istiak Rayhan","author_nicename":"wpx_roadtobl","author_url":"https:\/\/wptablebuilder.com\/fr\/author\/wpx_roadtobl\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/wptablebuilder.com\/fr\/docs-category\/configurations\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/docs\/1908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/comments?post=1908"}],"version-history":[{"count":0,"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/docs\/1908\/revisions"}],"wp:attachment":[{"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/media?parent=1908"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/doc_category?post=1908"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wptablebuilder.com\/fr\/wp-json\/wp\/v2\/doc_tag?post=1908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}