Centering table on a smartphone screen

Okay, never mind, I found my mistake. My tables are centered now. But I am having trouble changing the padding within the cells. I use this code :
.tablepress .column-2 {
padding: 4px;
}
and change the px number, but it seems to have no effect on the width of the columns — only on their height!

This is the page I am working on :
https://mobilelibraryupsem.org/hours/
As you see, some of the cell contents are more crowded than others. I think it needs a bit more space to separate column 1 and column 2. But I am not succeeding in making this change.

Hi,

thanks for your question, and sorry for the trouble.

Weird. This should work:

.tablepress td {
    padding: 8px 16px;
}

Regards,
Tobias

Oh, thank you so much — that looks more readable to me. Very nice display on the smartphone.

May I ask you one other thing? I would like my two tables to have different color schemes. Is that possible?

Hi,

good to hear that this works! ??

To set different colors, just use the CSS with different CSS classes for each table. For example:

.tablepress-id-123 td {
  background-color: #ff0000;
}
.tablepress-id-456 td {
  background-color: #00ff00;
}

Regards,
Tobias

It would look like this, then ?

.tablepress-id-[table id=1 /] td {
background-color: #ff0000;
}
.tablepress-id-[table id=2 /] td {
background-color: #00ff00;
}

Hi,

no, you would not enter the Shortcode there, but only the table ID.
In your case:

.tablepress-id-1 td {
background-color: #ff0000;
}
.tablepress-id-2 td {
background-color: #00ff00;
}

Additionally, make sure that the “Alternating row colors” checkbox is unchecked on the “Edit” screen of these tables.

Regards,
Tobias

That worked perfectly!! Thank you very much for your patience with my slow understanding. I do appreciate your help.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

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