Divi theme overriding tablepress CSS?

Hi Tobias,

I’m using Tablepress extensively on a pretty complex site with multiple styled tables (and it works marvellously!). I’m having trouble with CSS not executing completely after creating an extra css class (on the table’s edit page). Some of the selectors work, and some don’t.

For example, here’s the CSS I use for the whole table:

.tablepress-storklips tbody td {
text-align: left;
color: blue;
padding-right: 4px;
line-height: 1.2em;
} In this case, the text color is blue, and line-height is correct, but the text won’t align left, nor do selectors like max-width:none have any effect.

If I add the column specifically like this:

.tablepress-storklips .column-5 {
text-align: left;
color: red;
padding-right: 4px;
line-height: 1.2em;
} I do get the right effect, but again, max-width or word-wrap:none have no effect.

If I inspect the CSS (on Chrome devtools), I see the following from the Divi theme stylesheet:

#content-area table td,
#content-area table th {
max-width: 100px;
padding: 0.857em 0.587em;
} and if I change the max-width to “none”, I get what I’m after. However, I’m loath to change the theme’s css to get this. (I suspect Divi is doing something here- and I also think I’ve had enough of Divi!)

Ultimately, I’d like the text in the columns to align-left and not word-wrap. I’ve spent hours trying different things without success.

Even though it’s not quite ready, I’ve published the post so you can see it: http://storkcustom.com/how-your-lips-dictate-your-mouthpiece-choice/ (Tables are in tabs at the bottom of the page).

I hope you can provide some answers!

Thanks,
Colin