WordPress.org

Forums

TablePress
[resolved] disable table responsiveness (12 posts)

  1. unlovbl
    Member
    Posted 1 year ago #

    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

    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/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. unlovbl
    Member
    Posted 1 year ago #

    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!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    awesome! Great to hear that this helped! :-)

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  5. wpjohnny
    Member
    Posted 1 year ago #

    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;}}
  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. wpjohnny
    Member
    Posted 1 year ago #

    Thanks Tobias,

    Here's the link to the responsive grid... 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/checkout/
    As the grid collapses & re-orients on the cart & checkout pages, it messes everything up.
    Thanks for your help!

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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 tables.
    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

  9. wpjohnny
    Member
    Posted 1 year ago #

    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;}}
  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  11. wpjohnny
    Member
    Posted 1 year ago #

    Got it! Thanks, that works

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem! Good to hear that this helped! :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.