CSS & Tablepress

Hi,

thanks for your post, and sorry for the trouble.

To replicate the styling of that table from the second link, you will at first need to extract the relevant CSS from that page, maybe with something like the “Developer Tools” in the browser (which most modern browsers offer). As CSS can be very flexible, there’s no real automatic way to do this, so that this will require some manual work.
The examples in the TablePress FAQ at https://tablepress.org/faq/ as well as in the documentation https://tablepress.org/documentation/ might be helpful then on finding the modified code that needs to be pasted into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Regards,
Tobias

Hi, and thanks for replying;

I’ve used “developper Tools” to find ccs style in the second link, but it’s hard to understand et very difficult to use it in my own css page.

But, if you take a look again at my first link, and thanks to your précedent post, i’ve wrote this code in the css option of TablePress :

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: none;
	padding: 0;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: #000000;
	font-family: Trebuchet;
	font-size: 12px;
	font-style: bold;
	color: #FFFFFF;
}

.tablepress tbody td {
	font-family: Trebuchet;
	font-size: 12px;
	color: #000000;
	line-height: 100%;
}

.tablepress .column-1 {
	width: 5%;
	text-align: center;
}

.tablepress .column-2 {
	width: 7%;
	text-align: center;
}

.tablepress .column-3 {
	width: 13%;
	text-align: center;
}

.tablepress .column-4 {
	width: 16%;
	text-align: left;
}

.tablepress .column-5 {
	width: 13%;
	text-align: center;
	font-weight: bold;
}

.tablepress .column-6 {
	width: 16%;
	text-align: right;
}

.tablepress .column-7 {
	width: 5%;
	text-align: center;
}

.tablepress .column-8 {
	width: 5%;
	text-align: center;
}

.tablepress .column-9 {
	width: 15%;
	text-align: center;
}

.tablepress .column-10 {
	width: 5%;
	text-align: center;
}

.tablepress- {
	width: auto;
	margin: 0 auto 1em;
}

It’s not so bad, and i can use it like that.
But what i want to know, it’s

– how can i change font, style and colour of the headline. I wrote this part, without effect :

.tablepress thead th,
.tablepress tfoot th {
	background-color: #000000;
	font-family: Trebuchet;
	font-size: 12px;
	font-style: bold;
	color

– Can i have smaller “line-height” ?

– How to change color of the rows, replacing default white & blue ?

Thanks

jeanchristophe

Hi,

good to hear that you are making this great progress!

Due to how your theme uses CSS in tables, you’ll have to increase the priortity of some CSS properties. So, if something is not working (like those font or color changes), try appending the !important keywork, like

property: value !important;

With that, and with https://tablepress.org/faq/change-color-alternating-rows/ , you can change the colors.
For the line height, just reduce the padding in the cells.

Regards,
Tobias

Hi Tobias,

Thanx for ALL ! I’m thinking about the way i can use Table since months, and now it’s ok. I’m not joking : you helped me A LOT.

One last question : Please take a look to my first link.
Then, take a look here :

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: none;
padding: 0;
}

.tablepress thead th,
.tablepress tfoot th {
background-color: #000000 !important;
font-family: Trebuchet;
font-size: 12px !important;
font-style: bold !important;
color: #FFFFFF !important;
}

.tablepress .odd td {
background-color: #808080;
}

.tablepress .even td {
background-color: #C0C0C0;
}

.tablepress tbody td {
font-family: Trebuchet;
font-size: 12px;
color: #000000;
line-height: 100%;
border: none;
padding: 0;
}

I wrote : padding: 0… so how can i do less than 0 ? ??
I can manage with my table like that. It’s “good enough”, but i’d like to reduce “line height” a little bit (biggest icon is 15px high).
byebye

Hi,

same problem as above, just add !important, i.e. try

padding: 2px !important;

Regards,
Tobias