Title: disable table responsiveness
Last modified: August 20, 2016

---

# disable table responsiveness

 *  Resolved [unlovbl](https://wordpress.org/support/users/unlovbl/)
 * (@unlovbl)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/disable-table-responsiveness/)
 * Hello… I have a table that I created that is 4 columns wide by 16 rows long. 
   The table wraps itself into multiple sections on a page depending on the size
   of the browser window. Is there a way to turn off the responsiveness to the window
   and have the table display as one long table with all 16 rows aligned to the 
   columns regardless of the size of the browser window? Here is the page for your
   reference..
 * [http://circles6.com/clientportal/lezame/size_chart](http://circles6.com/clientportal/lezame/size_chart)
 * I have installed and activated the responsive tables extension with the associated“
   desktop” code in the table name and had no luck. Any help woud be greatly appreciated.
   Thanks in advance!
 * [http://wordpress.org/extend/plugins/tablepress/](http://wordpress.org/extend/plugins/tablepress/)

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630523)
 * Hi,
 * thanks for your post!
 * This is a really interesting case!
    The reason for this issue is not in TablePress,
   but in your theme. Your theme uses a not yet widely used feature to make text
   wrap into column automatically. TablePress has nothing to do with this. (Therefore,
   the Extension will not help.)
 * To change this behavior, you will have to turn off the automatic generation of
   columns for this page. I can imagine that there’s a setting for this on the “
   Edit” screen of the page. Currently, that setting is at 3 columns, and you should
   change that to 1. If you can’t find that, I recommend to contact the developer.
   
   After changing this, the table will display just fine.
 * Independently, you can uninstall the “Responsive Tables” Extension again (unless
   you want the same responsiveness feature for the table that you can see on the
   Extension’s page).
    Also, I recommend to activate the “Table Header” checkbox
   on the “Edit” screen of the table.
 * Regards,
    Tobias
 *  Thread Starter [unlovbl](https://wordpress.org/support/users/unlovbl/)
 * (@unlovbl)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630545)
 * Thank you Tobias! That was the issue. We enabled 3 columns for functions on another
   page on the site and the tables were affected. Thank you again for your help 
   and development of an awesome plugin! Cheers!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630593)
 * Hi,
 * awesome! Great to hear that this helped! 🙂
 * Best wishes,
    Tobias
 * P.S.: In case you haven’t, please [rate TablePress](http://wordpress.org/support/view/plugin-reviews/tablepress)
   here in the plugin directory. Thanks!
 *  [wpjohnny](https://wordpress.org/support/users/wpjohnny/)
 * (@wpjohnny)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630816)
 * Hi TobiasBg,
 * I managed to set-up a responsive row/column changing table for pages on an ecom
   website, they work great, however, when I go to the shopping cart, it is still
   hooked up to this manipulated table. Any idea how I get the woocommerce shopping
   cart to not turn into the manipulated table? Here is the css for the table:
 *     ```
       }
       /*
       Generic Styling, for Desktops/Laptops
       */
       table {
         width: 100%;
         border-collapse: collapse;
       }
       /* Zebra striping */
       tr:nth-of-type(odd) {
         background: #eee;
       }
       th {
         background: #333;
         color: white;
         font-weight: bold;
       }
       td, th {
         padding: 6px;
         border: 1px solid #ccc;
         text-align: left;
       }
       /*
       Max width before this PARTICULAR table gets bad
       This query will take effect for any screen smaller than 760px
       and also iPads specifically.
       */
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px)  {
   
       	/* Force table to not be like tables anymore */
       	table, thead, tbody, th, tdd, tr {
       		display: block;
       	}
   
       	/* Hide table headers (but not display: none;, for accessibility) */
       	thead tr {
       		position: absolute;
       		top: -9999px;
       		left: -9999px;
       	}
   
       	tr { border: 1px solid #ccc; }
   
       	td {
       		/* Behave  like a "row" */
       		border: none;
       		border-bottom: 1px solid #eee;
       		position: relative;
       		padding-left: 50%;
       	}
   
       	td:before {
       		/* Now like a table header */
       		position: absolute;
       		/* Top/left values mimic padding */
       		top: 6px;
       		left: 6px;
       		width: 45%;
       		padding-right: 10px;
       		white-space: nowrap;
       	}
   
       	/*
       	Label the data
       	*/
       	td:nth-of-type(1):before { text-align:left; content: "Model No."; }
       	td:nth-of-type(2):before { text-align:left; content: "Axles/Brakes"; }
       	td:nth-of-type(3):before { text-align:left; content: "Carrying Cap."; }
       	td:nth-of-type(4):before { text-align:left; content: "Tire"; }
       	td:nth-of-type(5):before { text-align:left; content: "Weight"; }
       	td:nth-of-type(6):before { text-align:left; content: ""; }
       }
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px) { #small-screen {display:none;}}
       ```
   
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630817)
 * Hi,
 * thanks for your question.
    To be honest, I don’t really understand the problem.
   Could you post a link and description so that I can see the problem “live”? Thanks!
 * Regards,
    Tobias
 *  [wpjohnny](https://wordpress.org/support/users/wpjohnny/)
 * (@wpjohnny)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630818)
 * Thanks Tobias,
 * Here’s the link to the responsive grid… [http://boattrailersforsale.co/premier-painted-trailers/](http://boattrailersforsale.co/premier-painted-trailers/)
   
   As you make your screen smaller it will change the so the rows / column are re-
   oriented and easier to read on mobile devices. The problem is I’m trying to stop
   this from happening on the CART & CHECKOUT pages: [http://boattrailersforsale.co/cart/](http://boattrailersforsale.co/cart/)
   [http://boattrailersforsale.co/checkout/](http://boattrailersforsale.co/checkout/)
   As the grid collapses & re-orients on the cart & checkout pages, it messes everything
   up. Thanks for your help!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630819)
 * Hi,
 * thanks for the links! Now I get it! 🙂
    (And from what I can see, you are not
   actually using TablePress (these are the TablePress support forums), but that’s
   fine.)
 * Basically, you’ll just have to modify the CSS selectors in your code to apply
   to the CSS class `table.easy-table` and not to all `table`s.
    So, all occurances
   of `table` should be changed to `table.easy-table` and all the other CSS selectors
   should be prefixed with `table.easy-table`.
 * Regards,
    Tobias
 *  [wpjohnny](https://wordpress.org/support/users/wpjohnny/)
 * (@wpjohnny)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630820)
 * So I changed everything in my stylesheet.css, however, the cart & checkout is
   still unwantingly changing orientation?? Here’s what I changed…
 *     ```
       }
       /*
       Generic Styling, for Desktops/Laptops
       */
       table.easy-table {
         width: 100%;
         border-collapse: collapse;
       }
       /* Zebra striping */
       tr:nth-of-type(odd) {
         background: #eee;
       }
       th {
         background: #333;
         color: white;
         font-weight: bold;
       }
       td, th {
         padding: 6px;
         border: 1px solid #ccc;
         text-align: left;
       }
       /*
       Max width before this PARTICULAR table gets bad
       This query will take effect for any screen smaller than 760px
       and also iPads specifically.
       */
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px)  {
   
       	/* Force table to not be like tables anymore */
       	table.easy-table, thead, tbody, th, td, tr {
       		display: block;
       	}
   
       	/* Hide table.easy-table headers (but not display: none;, for accessibility) */
       	thead tr {
       		position: absolute;
       		top: -9999px;
       		left: -9999px;
       	}
   
       	tr { border: 1px solid #ccc; }
   
       	td {
       		/* Behave  like a "row" */
       		border: none;
       		border-bottom: 1px solid #eee;
       		position: relative;
       		padding-left: 50%;
       	}
   
       	td:before {
       		/* Now like a table header */
       		position: absolute;
       		/* Top/left values mimic padding */
       		top: 6px;
       		left: 6px;
       		width: 45%;
       		padding-right: 10px;
       		white-space: nowrap;
       	}
   
       	/*
       	Label the data
       	*/
       	td:nth-of-type(1):before { text-align:left; content: "Model No."; }
       	td:nth-of-type(2):before { text-align:left; content: "Axles/Brakes"; }
       	td:nth-of-type(3):before { text-align:left; content: "Carrying Cap."; }
       	td:nth-of-type(4):before { text-align:left; content: "Tire"; }
       	td:nth-of-type(5):before { text-align:left; content: "Weight"; }
       	td:nth-of-type(6):before { text-align:left; content: ""; }
       }
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px) { #small-screen {display:none;}}
       ```
   
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630821)
 * Hi,
 * you will need to put `table.easy-table` before the other selectors as well, like
 *     ```
       }
       /*
       Generic Styling, for Desktops/Laptops
       */
       table.easy-table {
         width: 100%;
         border-collapse: collapse;
       }
       /* Zebra striping */
       table.easy-table tr:nth-of-type(odd) {
         background: #eee;
       }
       table.easy-table th {
         background: #333;
         color: white;
         font-weight: bold;
       }
       table.easy-table td,
       table.easy-table th {
         padding: 6px;
         border: 1px solid #ccc;
         text-align: left;
       }
       /*
       Max width before this PARTICULAR table gets bad
       This query will take effect for any screen smaller than 760px
       and also iPads specifically.
       */
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px)  {
   
       	/* Force table to not be like tables anymore */
       	table.easy-table,
       	table.easy-table thead,
       	table.easy-table tbody,
       	table.easy-table th,
       	table.easy-table td,
       	table.easy-table tr {
       		display: block;
       	}
   
       	/* Hide table.easy-table headers (but not display: none;, for accessibility) */
       	table.easy-table thead tr {
       		position: absolute;
       		top: -9999px;
       		left: -9999px;
       	}
   
       	table.easy-table tr { border: 1px solid #ccc; }
   
       	table.easy-table td {
       		/* Behave  like a "row" */
       		border: none;
       		border-bottom: 1px solid #eee;
       		position: relative;
       		padding-left: 50%;
       	}
   
       	table.easy-table td:before {
       		/* Now like a table header */
       		position: absolute;
       		/* Top/left values mimic padding */
       		top: 6px;
       		left: 6px;
       		width: 45%;
       		padding-right: 10px;
       		white-space: nowrap;
       	}
   
       	/*
       	Label the data
       	*/
       	table.easy-table td:nth-of-type(1):before { text-align:left; content: "Model No."; }
       	table.easy-table td:nth-of-type(2):before { text-align:left; content: "Axles/Brakes"; }
       	table.easy-table td:nth-of-type(3):before { text-align:left; content: "Carrying Cap."; }
       	table.easy-table td:nth-of-type(4):before { text-align:left; content: "Tire"; }
       	table.easy-table td:nth-of-type(5):before { text-align:left; content: "Weight"; }
       	table.easy-table td:nth-of-type(6):before { text-align:left; content: ""; }
       }
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px) { #small-screen {display:none;}}
       ```
   
 * Regards,
    Tobias
 *  [wpjohnny](https://wordpress.org/support/users/wpjohnny/)
 * (@wpjohnny)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630822)
 * Got it! Thanks, that works
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630823)
 * Hi,
 * sure, no problem! Good to hear that this helped! 🙂
 * Best wishes,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘disable table responsiveness’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 11 replies
 * 3 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/disable-table-responsiveness/#post-3630823)
 * Status: resolved