WordPress.org

1. Neil Haslewood
   Member
   Posted 6 months ago #
   

   Hi

   I am setting up TablePress for the first time. The initial look and feel of the Table is amazing. I imported a large csv file and have configured it with no problem. It is really good.

   However when I look at the webpage with the TablePress table on an iPhone I find that the table is not responsive and columns are out of view and data is missing. Is there a fix for this issue. When using HTML only in a Page to create a table I can use CSS to hide columns I dont need on different types of media / devices.

   The webpage in question can be found at http://www.peakandfellwalking.co.uk/peaks/birketts/

   I hope you can help.

   Thank you

   Neil

   http://wordpress.org/extend/plugins/tablepress/

2. TobiasBg
   Member
   Plugin Author
   Posted 6 months ago #
   

   Hi Neil,

   thanks for your question.

   You are correct, there's no real "responsiveness" in the tables right now. Therefore, all columns will be shown on all devices (and with that not always visible on a small screen).
   I don't have a definite solution to this yet, but remember that you can also add CSS to the TablePress tables, via the "Custom CSS" textarea. If you add CSS code there that by using CSS media queries hides certain column (which all have a CSS class like .column-N where N is the column number), you are already very close.

   Regards,
   Tobias

3. Neil Haslewood
   Member
   Posted 6 months ago #
   

   Hi Tobias

   Thats perfect thank you ... I have applied CSS code as suggested and it now looks great. One final question ... when I use my own CSS code and dont select the default CSS Table Styling I loose the styling of the "Previous" "Next" and "Header Sort" Icons. If I click on the words for each they still work. Is there a fix for this?

   Thank you once again

   Regards
   Neil

4. TobiasBg
   Member
   Plugin Author
   Posted 6 months ago #
   

   Hi Neil,

   you should leave the "Default CSS" checked. In fact, in the next release of TablePress, that checkbox will be gone anyway, and the CSS will always be one (it can then only be turned off by using a plugin filter hook). The reason for this is that the default CSS is essential for using the plugin, as you currently experience with the mentioned icons.
   So, going forward, the best solution is to use the default CSS, but overwrite those parts that you don't want or like with "Custom CSS".

   Regards,
   Tobias

5. Neil Haslewood
   Member
   Posted 6 months ago #
   

   Hi Tobias

   Ok no problem ... thats great. However could you just let me what the CSS code is that influences the styling of the table ... ie the background colous and fonts, the header colours and fonts, and the header and next previous buttons. I have tried to change the default styling but as yet I have had no luck so far.

   Thank you for your help in the matter. It is a really great plugin.

   Regards
   Neil

6. Neil Haslewood
   Member
   Posted 6 months ago #
   

   Hi Tobias

   Just an update on my last post. I have tested both other tables on my website and your TablePress table. If I change the settings on normal tables then they work ok. Also if I have change the settings on your TablePress table (without the default CSS applied) then that is ok too. However as soon as I apply the default CSS on TablePress then those settings take over and I cant use any custom CSS settings anymore? I hope you find this useful and that you find a fix for the problem.

   Regards
   Neil

7. Neil Haslewood
   Member
   Posted 6 months ago #
   

   Hi Tobias

   By the way ... all I am trying to apply for my custom CSS testing is for example ...
   td {
   background-color:solid grey;
   }
   Regards
   Neil

8. TobiasBg
   Member
   Plugin Author
   Posted 6 months ago #
   

   Hi Neil,

   the reason for this is that TablePress uses CSS classes in its CSS code, to make sure that only TablePress tables are affected by the Default CSS. Without this, all tables on a page would get the TablePress default styling, which is not desired by everybody. So, the CSS selectors all use a class at the beginning:
   

   .tablepress

   if the code shall apply to all TablePress tables, or
   

   .tablepress-id-123

   if the CSS shall only apply to one table (the table with the ID 123 in this example).
   So, your code to change the background color would need to look like
   

   .tablepress td {
     background-color: grey;
   }

   (Additionally, make sure that the "Alternating row colors" checkbox on the table's "Edit" screen is unchecked, if you don't want this).

   There will be more on this (including examples) in the FAQ page on the TablePress plugin website (http://tablepress.org/), once I find the time. Until then, you can find these examples on the WP-Table Reloaded website (the TablePress predecessor) at http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/ and http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/documentation/ . Whenever the code contains
   

   .wp-table-reloaded

   there, just replace that with
   

   .tablepress

   Regards,
   Tobias

9. Neil Haslewood
   Member
   Posted 6 months ago #
   

   Hi Tobias

   That is excellant ... thank you. There is just one last section that does not seem to respond and I wondered if there was a fix.

   In Table Options I have "The first row of the table is the table header" as selected. My Custom CSS code for the header is ...

   .tablepress-id-1 th, .tablepress-id-1 .sorting {
   height:20px;
   border:1px solid grey;
   background-color:solid grey;
   padding:3px 5px;
   }
   .tablepress-id-1 .sorting_asc, .tablepress-id-1 .sorting_desc {
   height:20px;
   border:1px solid grey;
   background-color:solid grey;
   padding:3px 5px;
   }

   Is there anything I am doing wrong?

   Thank you once again.

   Regards
   Neil

10. TobiasBg
    Member
    Plugin Author
    Posted 6 months ago #
    

    Hi Neil,

    that's because of a wrong color value:
    

    solid grey

    is not valid in the background-color argument. Just change that to
    

    grey

    Additionally, you can change the hover color and also combine all of this into a smaller piece of CSS:
    

    .tablepress-id-1 th,
    .tablepress-id-1 .sorting,
    .tablepress-id-1 .sorting:hover,
    .tablepress-id-1 .sorting_asc,
    .tablepress-id-1 .sorting_desc {
      height: 20px;
      border: 1px solid grey;
      background-color: grey;
      padding:3px 5px;
    }

    Regards,
    Tobias

11. Neil Haslewood
    Member
    Posted 6 months ago #
    

    Hi Tobias

    Thank you for all your help. It is all working fine now.

    Regards
    Neil

12. TobiasBg
    Member
    Plugin Author
    Posted 6 months ago #
    

    Hi Neil,

    no problem, you are very welcome! Good to hear that everything is working now! :-)

    Best wishes,
    Tobias

Reply

You must log in to post.