Change padding and margin for the rows

Hi Juli,

thanks for your question.

You should actually only have to add some small “Custom CSS” code on the “Plugin Options” screen of TablePress:

.tablepress-id-123 th,
.tablepress-id-123 td {
  padding: 0px;
}

That would reduce the padding in all cells (here, of table 123) so that the text should start at the beginning and so that the rows should have a smaller height.

Regards,
Tobias

Hallo Tobias,

I was pleased to find TablePress, as I thought it would be the solution to my problem of image/text layout, compatible with all sizes of screen. I’m not looking for anything sophisicated, mostly 4 to 5 images strung across the page in a single row (see top row of photos at bottom of page on https://s409188927.onlinehome.fr/?page_id=34 ). But I can’t seem to reduce the padding. I’ve tried adding the following to my Plugin Options:

.tablepress {
padding: 0px;
}

.tablepress-id-2 {
padding: 0px;
}
(“px” disappears and the 0 is uncrossed when I save either option.)

Neither of the above works for me. The padding remains stubbornly thick and the last picture is off the screen.

Do put me out of my misery!

Vielen Dank!
Hazel

[Moderator Note: Please ensure that you are embedding links correctly in your posts.]

@hazelfrance: If you require assistance then, as per the Forum Welcome, please post your own topic.

Hi HazelFrance,

thanks for your post, and sorry for the trouble.

Please compare your code to the code that I posted above again. Padding is a property of the cells and not the table itself, and thus your CSS selector needs to be adjusted a little bit.

However, in your case, the problem has a different source: The wrapping containers around your image (the HTML code) have a width set in them. This forces the large white space between the images. Changing the padding will not really change this much.

Now, instead of actually using a table, you should simply place the images into the page with the HTML that you are using at the bottom. Tables are for displaying data, but they should not be used for styling purposes like this.

Regards,
Tobias

Thanks for your prompt answer, Tobias,

The problem with simply placing the images on the page is that they line up in a different way according to what type of screen you’re using. (I use an ancient almost square model, as I hate the current wide screens.) I’m a bit of an ancient model myself but, before I retired, I was able to relook my department’s intranet site quite easily using tables for alignment and spacing. Do you know if WordPress offers this possibility?

Regards,
Hazel

Hi Hazel,

what I meant was that tables should not be used, as that is against their semantics. From a technical point of view, it is absolutely no problem, so that you can absolutely do this, if desired. Here, you’ll basically just have to remove the part from the HTML in the cells that makes the images so wide (looks similar to

style="width: 250px"

).

Now, you mention that the images line up differently according to the screen. That is of course correct, but I would argue that this is actually a good thing, and something that responsive web design usually strives for. Imagine a small phone or tablet display: If you force the images to one row in a table, they will either extend to the right or become very small. With the “native” and responsive behavior, they will wrap in to multiple lines so that they can viewed easily.

Regards,
Tobias

Hi Tobias,

I’m redoing the layout of each page of the website dedicated to my grandfather https://www.josefkolbe.com, inserting the photos I want aligned in a table. Take a look at the first few tabs and you’ll see it’s shaping up nicely.

I take your point about displaying on a small phone or tablet, but it’s very unlikely that the audience I’m hoping to reach uses anything other than a desk-top. (Basically, I’m writing a book which I’m posting on the web.)

I consider my part of this thread solved. Thanks very much for all your help!

Regards,
Hazel

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!
That’s a very nice idea and project!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!