[Plugin: wp-table-reloaded] aligning images/text in cells

Hi,

you could try this:

for columns

.wp-table-reloaded-id-1 .column-1 {
 text-align: center!important;
 vertical-align: middle!important;
}

for rows

.wp-table-reloaded-id-1 .row-1 td {
 text-align: center!important;
 vertical-align: middle!important;
}

aligment is heavily dependent on margins and paddings though, especially for images. So, depending on your theme, you might need to additionally override certain properties.

A good way to experiment with CSS is using the Firefox browser (https://www.firefox.com/) and the Firebug add-on (https://www.getfirebug.com/). With that you can manipulate those properties live on the website and see the immediate output.

Best wishes,
Tobias

Thanks, I was able to get this to work on one table but having trouble on another, it centers but does not vertically align. Here’s my code, you can see the table here: htt[://planet.vsphere-land.com

.wp-table-reloaded-id-3 .column-1 {
  width: 200px;
}
.wp-table-reloaded-id-3 .column-2 {
  width: 50px;
}
.wp-table-reloaded-id-3 .column-3 {
  width: 200px;
}
.wp-table-reloaded-id-3 .column-4 {
  width: 50px;
}
.wp-table-reloaded-id-3 .column-5 {
  width: 200px;
}
.wp-table-reloaded-id-3 .column-6 {
  width: 50px;
}
.wp-table-reloaded-id-3 .row-1 th {
 text-align: center!important;
 vertical-align: middle!important;
}
.wp-table-reloaded-id-3 th, .wp-table-reloaded-id-1 .sorting {
background-color: #ffffbb!important;
}
.wp-table-reloaded-id-3 td {
  font-family: Arial;
  font-size: 11px;
  color: #000000;
}
.wp-table-reloaded-id-3 td {
 padding: 1px!important;
}
.wp-table-reloaded-id-3 .column-2 {
 text-align: center!important;
 vertical-align: middle!important;
}

Hi,

those images to indeed vertical-align middle. It is just not visible, due to the small cell height, so maybe you’ll need to play around with that.

.wp-table-reloaded-id-3 .column-2 {
 text-align: center!important;
 vertical-align: middle!important;
 height: 30px;
}

I don’t know though, why they don’t align nicely for the small height. I assume there is a padding or margin set somewhere. So, you could also try adding a top-margin to the images:

.wp-table-reloaded-id-3 .column-2 img{
 margin-top: 4px;
}

Best wishes,
Tobias

Hi,

How can I align the whole table? I would like table at https://www.mobilskole.no/produkt to center.

I have tried

.wp-table-reloaded-id-1 {
width: 600px!important;
float: center;

Thanks,
H?kon

Hi,

I don’t see why you want to center that table (as it looks pretty good as it is now and centering it would only move it a few millimeters), but that requires some more work in most cases.
Have you taken a look at the question “How do I center a table on the page?” in the Plugin FAQ?

Best wishes,
Tobias

Thanks for quick reply. The thing is that I have embedded the page on the frontpage https://www.mobilskole.no where it would look better if table was centered. Now I have the following custom CSS:

<div style="width: 60%; text-align:center;">[table id=1 /]</div>

.wp-table-reloaded-id-1 td {
  font-size: 14px;
}
.wp-table-reloaded-id-1 .row-11 .column-2 {
  font-size: 18px;
}
.wp-table-reloaded-id-1 .row-11 .column-3 {
  font-size: 18px;
}
.wp-table-reloaded-id-1 .row-11 .column-4 {
  font-size: 18px;
}
.wp-table-reloaded-id-1 .column-2 {
  width: 75px;
}
.wp-table-reloaded-id-1 .column-3 {
  width: 75px;
}
.wp-table-reloaded-id-1 .column-4 {
  width: 75px;
}
.wp-table-reloaded-id-1 th, .wp-table-reloaded-id-1 .sorting {
  font-size: 14px;
 }
.wp-table-reloaded-id-1 .sorting_asc, .wp-table-reloaded-id-1 .sorting_desc {
  font-size: 14px;
}

Cheers,
H?kon

Hi,

ok, I see the problem.
This won’t work however.
You have put the <div> code into the Custom CSS, which is wrong.

Actually this means, that you need to replace the Shortcode [table id=1 /] within the post/page with the code with the div.
Do you understand what I mean?

So, go to the post with the table and replace [table id=1 /] with
<div style="width: 100%; text-align:center;">[table id=1 /]</div>.

Best wishes,
Tobias

Hi,

Thanks for replying. The table is still not centered on the page, only the description text (have a look at https://www.mobilskole.no and https://www.mobilskole.no/produkt).

Another issue is that I am trying to limit the width of the table. I have used .wp-table-reloaded-id-1 .column-x to limit columns to 150 and 75 px but it don’t work.

CSS code as of today:

.wp-table-reloaded-id-1 td {
  font-size: 14px;
}
.wp-table-reloaded-id-1 .row-11 .column-2 {
  font-size: 18px;
}
.wp-table-reloaded-id-1 .row-11 .column-3 {
  font-size: 18px;
}
.wp-table-reloaded-id-1 .row-11 .column-4 {
  font-size: 18px;
}
.wp-table-reloaded-id-1 .column-1 {
  width: 150px;
}
.wp-table-reloaded-id-1 .column-2 {
  width: 75px;
}
.wp-table-reloaded-id-1 .column-3 {
  width: 75px;
}
.wp-table-reloaded-id-1 .column-4 {
  width: 75px;
}
.wp-table-reloaded-id-1 th, .wp-table-reloaded-id-1 .sorting {
  font-size: 14px;
 }
.wp-table-reloaded-id-1 .sorting_asc, .wp-table-reloaded-id-1 .sorting_desc {
  font-size: 14px;
}

Hi,

as I said, it is not always that easy, because of the many many aspects of CSS ??

I had a look at your page, and if you add this CSS, it should work:

.wp-table-reloaded-id-1 {
  width: auto;
  margin: 10px auto;
}

Also, that <div> that you put around the Shortcode should get a width of 100%.

Then, your table should be smaller and centered on the page ??

Best wishes,
Tobias