[Support request] CSS for tables

[Hafsa]

Hi,
I’m using table press to put up a lot of content in tables. However, I wish to stylize it with the same fonts, text, colors as I have in the original container. Requesting guidance on the CSS here, and how to implement the same.
Thanks.

[David]

Hi there,

have you checked first in the Tablepress settings – i would assume it has some ‘themeing’ controls ie. inherit Theme colors / fonts …. more you can do within the plugin the better. Let me know.

[Hafsa]

Hi, They allow you to manually put in a css but unfortunately nothing more.
(https://prnt.sc/rctmh6)
(https://tablepress.org/documentation/)

Could you please help me get a basic css together – this themed in a similar matter to our containers? Will really appreciate your support.

Table Header background, #666666
Table entries Font: nono sans
Table entries Font Size: 12px bold
Table entries Font: nono sans
Table entries Font Size: 12px
Alternative colours of table rows, #FFFFFF and #3A3A3A
Table border: 1px solid #bbbbbb;
Table border-radius: 10px;

[David]

I am not seeing the tables on your site ? Let me know where i can see it so i can advise on the CSS

[Hafsa]

Please check again, at the URL provided, Thank you

[Tom]

Hi there,

Let me know if this helps or not:

.tablepress thead th {
    background: #666666;
    color: #fff;
}

.tablepress tbody tr td {
    font-family: "noto sans";
    font-size: 12px;
    font-weight: bold;
}

.tablepress .odd td {
    background: #3A3A3A;
}

[Hafsa]

Hi Tom,
The CSS styling seems to be getting an over-ride.This appears (https://prnt.sc/rdj1oc), and the is immediately changed to (https://prnt.sc/rdj1lv). I’m using SimpleCSS.
Could you please guide?

[David]

How did you add the CSS to the site ?
The plugin docs mention the plugin has its own Custom CSS field – maybe worth trying that.

https://tablepress.org/faq/

[Hafsa]

Hi,
I’m almost there, but struggling with one minor issue.
On desktop, I’m trying to turn off a pre-defined width of 514px for “dataTables_scrollHeadInner” (https://prnt.sc/rdygq7) and for “tablepress tablepress-id-2 dataTable no-footer” (https://prnt.sc/rdygrv). Instead, I just want the width to be 100% for the table to appear fully in my container.

I’ve tried numerous iterations (https://prnt.sc/rdygwr), but it’s not working.

Could you advise on the right way of fixing the CSS?
Thanks.

P.S. This is the table that i’m referring to,
https://covid19tracker.info/template/

[David]

Ok to overwrite Inline CSS Styles requires the !important statement, so give this CSS a shot:

.dataTables_scrollHeadInner,
.dataTables_scrollBody,
.dataTables_wrapper .tablepress {
    max-width: 100% !important;
    width: 100% !important;
}

[Hafsa]

It worked, thank you 🙂

[David]

You’re welcome

[Author]

Posts