TablePress Row Height

Hi,

I took a quick look at your site and this seems to control the padding around images:

.tablepress th, .tablepress td {
background: none repeat scroll 0 center transparent;
border: 0 none;
padding: 8px;
text-align: left;
}

This is setting the border on top of each image on the second row – it is not a border that is set on the row itself, it is set on each image:

.tablepress tbody td, .tablepress tfoot th {
border-top: 1px solid #DDDDDD;
}

Thanks for that, although I’m not sure where to find that code to change it. Is it in tablepress somewhere or part of the theme? I’ve taken over this site from someone else and its the first time I’ve used wordpress.

I tried adding something similar to the custom CSS in tablepress to override that but it didn’t work. Also, if the padding around images is 8 pixels, the gap between them looks a lot more than 16 pixels??

Hi,

thanks for your post, and sorry for the trouble.

One possible reason for the problem comes from syntax errors in your CSS code:
You must not have a comma , directly before the opening bracket {. That happens at least twice in your code, so you should fix that.

And then I’d actually like to suggest a different approach here: You are using one large table to show the small images on the left and the actual content of the page on the right. Thus, you are using a table for layout and design purposes, which is not what tables should be used for in modern webdesign.
Instead, you might want to look into an approach with HTML <div> containers to create the basic two-column layout of the page, where you then put the small table into the left column, and the actual content into the right column, but not in a table, but as the actual content of the page instead.
An easy start for this would be a HTML structure in the page, like

<div style="float:left; width:40%;">

[table id=1 /]

</div><div style="float:right; width:60%;">

Content for the page/description of the person

</div>

Regards,
Tobias

Hi,
The way I found the css I posted above is using the Firebug addon in Firefox browser.

You can simply hihglite any part on a webpage and Firebug will show you the css that is being used on that part.

In terms of finding the code to change it, if you would like to continue using css to style your page, I would suggest you create a child theme and then use css in there that over-rides the css that styles the table.

TobiasBg above is the author of the TablePress plugin – he is suggesting you do not use tables to layout the pictures. This is a valid option as well.

Hope this helps.

Hi,

yes, Firebug and the Chrome Developer Tools are excellent to find out things about CSS. Good recommendation, wpfan100!

A child theme shouldn’t be necessary for small table-related things like this. The easier way would be to just override the current CSS code with some CSS code that for example is pasted into the “Custom CSS” textarea on the “Plugin Options” screen.

However, before doing that, you should reconsider your table structure, as I outlined above.

Regards,
Tobias

Thanks Tobias and wpfan. Fixed the syntax errors and that looks much better already, although I will also accept the suggestion to use divs and will check out Firebug.

Hi,

great to hear that this helped! ??
Looks better, indeed.

Best wishes,
Tobias