Table Responsive Issue

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

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

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

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

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

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

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 (https://tablepress.org/), once I find the time. Until then, you can find these examples on the WP-Table Reloaded website (the TablePress predecessor) at https://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/ and https://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

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

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

Hi Tobias

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

Regards
Neil

Hi Neil,

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

Best wishes,
Tobias