Large Table in TablePress

Hi,

thanks for your question!

Sorry, I don’t have a readily usable solution for this.
You could probably achieve this with some JavaScript code and some CSS.
For example, you could hide those rows with CSS first, and then use jQuery or plain JS to “wait” for a button click and then make the rows visible.
You will need a little bit of custom programming for that though.

Regards,
Tobias

I’m progressing well with TablePress as an availability calendar.
I can change the colour of complete rowes using the Plugin Options but I am still having trouble making my first column wider and making a column or part of a column a different colour.
I tried ‘ .tablepress-id-N .column-2 {background-color: #FFFFFF; }’
but nothing seems to happen.
Can anyone help?

Hi,

you are entering the CSS code into the wrong field. It must not go into the “Custom Commands” textfield on the “Edit” screen, but into the “Custom CSS” textarea on the “Plugin Options” screen.

Additionally, you might actually want to try to reduce the padding in the table cells:

.tablepress-id-2 th,
.tablepress-id-2 td {
  padding: 8px !important;
}

Regards,
Tobias

I am using the Custom CSS area in Plugin Options Frontend Options.
I still can’t seem to alter any columns in size or colour

Hi,

when I check the link that you posted above, there is no CSS code in that field. There’s however CSS code in the “Custom Commands” textfield which is wrong.
Please remove that from the “Custom Commands” and add the code from above to the “Custom CSS” textarea on the “Plugin Options” screen.
If you are using some sort of site caching, make sure to refresh that cache.

Regards,
Tobias

Sorry I am not using a live site.

I have changed row colours and now the column width OK.
To alter part of a row to a different colour I am using for example

‘.tablepress-id-5 .row-10 .column-2 td {
background-color: #D1FFFF;
}

.tablepress-id-5 .row-10 .column-16 td {
background-color: #CCFF66;
}’

Hi,

ah, ok… Unfortunately, it’s hard for me to help on a non-live site…
however, there’s a small error in your code that might be responsible here: The td is already the element with the CSS class for the column, so you must remove it:

.tablepress-id-5 .row-10 .column-2 {
background-color: #D1FFFF;
}

.tablepress-id-5 .row-10 .column-16 {
background-color: #CCFF66;
}

Regards,
Tobias

Thanks I’ve now managed to select columns I need.
My next challenge is to be able to select a range of the table eg a section from row-1 column-2 to row-8 column-12 to make all these cells a particular colour. Is there some CSS code I can use to do this?

Also, I am putting a long table on a webpage. There is some explanatory text first. Is it possible to freeze the text and the heading of the table as you scroll down the table?

Thanks for all the help so far

Hi,

selecting a range of cells is not that easy in CSS, unfortunately. You’ll need to combine the selectors for individual cells, like

.tablepress-id-5 .row-1 .column-2,
.tablepress-id-5 .row-1 .column-3,
.tablepress-id-5 .row-1 .column-4,
.tablepress-id-5 .row-2 .column-2,
.tablepress-id-5 .row-2 .column-3,
.tablepress-id-5 .row-2 .column-4 {
  ...
}

Depending on how big the block is compared to the rest of the table, it might be faster to set that styling as the table’s default, and then revert it for the rows/columns “outside” of this block.

I’m not aware of a directly usable solution for freezing that explanatory text, sorry. For freezing the table read row, you can use the TablePress Extension from https://tablepress.org/extensions/datatables-fixedheader/

Regards,
Tobias