Hi,
please to this as first steps:
Uncheck the “Table Head Row”, “Alternating Row Colors”, and “Row Hover Highlighting” checkboxes.
That should take care of (at least) c).
Then also add this to the “Custom CSS”
.tablepress-id-4 img {
margin: 0;
padding: 0;
max-width: 100%;
}
.tablepress-id-4 .column-3 {
line-height: 1em;
width: 200px;
}
That should take care of the positioning and line spacing.
One more thins: Why are you using a three-column table where two columns are combined? Why don’t you just use a two-column table?
Regards,
Tobias
The reason is I’d like one column a lot wider than the other. Is there a better way of doing this?
Best, MargotP
Hi,
yes, the best way for that is to set the columns widths manually, via CSS. My code above does this for the third column (which is actually the second).
To see how this works, please see http://tablepress.org/faq/column-widths/
Using a three-column table but combining two-columns does not actually increase their width, so that approach won’t work.
Regards,
Tobias
Aha! Thanks I’ll check that out.
Also, I made the type/image changes but still the tope of the characters in the Title: COPERNICUS FUNDS doesn’t line up with the top of the image.
Hovering over buttons still gives a grey outline, but I take that as a 2011 child theme style.css issue.
Once I deleted the middle column the type lined up! Many many thanks!
Hi,
nope, you did not use the exact CSS code from my post above, which is why the text and image don’t line up.
Also, all instances of “N”, “X”, and “Y” in the CSS code that you added, need to be changed to their respective values (“N” to a table ID, “X” to a row number, and “Y” to a column number). (Or the “-id-N” part needs to be removed, if you want a setting to apply to all TablePress tables.)
And the table has that grey background, as well as the darker grey hover, because you did not uncheck the “Alternating Row Colors”, and “Row Hover Highlighting” checkboxes, as I suggested above.
Regards,
Tobias
Oops, now they don’t line up again 🙁 Trying to figure it out.
Hi,
ok, that’s good already 🙂
Now you need to fix the white space around the images.
To that, I recommend to change
.tablepress-id-N img {
margin: 0;
padding: 0;
}
to
.tablepress img {
margin: 0;
padding: 0;
}
(That will also slighly change the appearance of the images on http://www.margottago.com/gingermop/digital/ . If you don’t want that, change the code to
.tablepress-id-4 img {
margin: 0;
padding: 0;
}
That way, it will only apply to the table on http://www.margottago.com/gingermop/digital/copernicus1/
Regards,
Tobias
OK, now I see what’s happening. When I change the number for em on the font it shifts the first line down (nothing to to with padding, margins, etc.). In the interest of still having the text fall so the Image and the Cap Height of the Title line up across the top PLUS having the line height of the body copy the way I want it (around 1.5 em) is there anything I can do?
MargotP
Hi,
to be honest, that description confused me a little bit. Sorry 🙂
So, you want a different font size and line height (which defines the vertical spacing between the text)?
Then, I suggest that you change the font size and the line height to what you would like to have, and then we’ll take care of the positioning again.
Regards,
Tobias
That’s ok, I was rambling. I think it needed to be this way all along, just refined the line height. I guess the one question would be how to add a little extra space between paragraphs within the cell (if the need were to arise).
Again, many thanks, MargotP
Hi,
so, you have now set the desired font size and line height for the “COPERNICUS FUND This describes …” text?
And now you want the image to align with text at the top?
If you now reduce the margin for the images from 5px to 2px, and remove the empty line above “COPERNICUS FUND This describes…”, you should have it.
Or am I still not understanding a few things?
Regards,
Tobias
I’m really happy with how this looks! I think I’m close to resolving this.
Is there a way to move the type a little more to the right? I tried padding and margins for column 2 and it didn’t seem to work. Also, do I need to input these values for every table? Is there a more concise way of doing this (eg. .tablepress-id-4, 6, 7, 8) All but 2 tables on the entire site will be using these settings. And I will have LOTS of these tables.
Again thanks for all of your help.
Hi,
to move the text more to the right, you’ll indeed just have to add some padding again (you have one CSS command, that takes it away). Just change
.tablepress-id-4 .column-2 {
to
.tablepress-id-4 .row-1 .column-2 {
and the cell will have a 2px padding.
About handling this for several tables at once: If really only two tables have a different style, you could make this CSS the default, by simply always using
.tablepress
in the selector, instead of
.tablepress-id-123
That way, you won’t have to copy the CSS for each table.
Just for the two tables that shall not have this styling, you’ll basically have to reset the styling, with some “Custom CSS” targets just them (with their respective .tablepress-id-123 selector).
Regards,
Tobias
That’s a great idea! Just do the particular styling with the fewer group of tables! (haven’t done it yet, but will further down the line).
Also, the spacing for that second column is great!
Now, what about have different font colors/weights/sizes WITHIN the cell? It turns out we have subtitles for some of the work, and I’m working on a type hierarchy. If not possible, should I just create more rows with the rowspan option?
Again, many thanks. Margot P
