Size and Styling of Table

Hi again,

hold on with my last two pieces of code. I got that wrong. Your theme does not alter the padding, and it already is set to 4px, so you don’t need that code.
And actually, the text in your table is already center, so you won’t need the last piece of code.
(In case you meant to vertically center the text: That’s a result of the remaining line breaks, see the initial paragraph in my previous post and remove those remaining line breaks as well.)

Regards,
Tobias

Hi Tobias

My table is now looking good however I’ve got another quick questions for you!

I’ve added another table just below the first and the columns are not the same size?

I’ve duplicated all the custom code I added for the first table in Plugin Optiosn and just changed the table ID to match the second table?

Any idea what I need to do to get them to match up?

Here is the code I have added….

.wp-table-reloaded td, .wp-table-reloaded th {
text-align:center!important;
vertical-align:middle!important;
}

.wp-table-reloaded-id-2 th, .wp-table-reloaded-id-2 .sorting {
background-color: #999999!important;
}

.wp-table-reloaded-id-2 .sorting_asc, .wp-table-reloaded-id-2 .sorting_desc {
background-color: #999999!important;
}

.wp-table-reloaded-id-2 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #111111!important;
}
.wp-table-reloaded-id-2 th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff!important;
}
.wp-table-reloaded-id-2 .column-2 {
width: 75px!important;
}

.wp-table-reloaded-id-2 .column-4 {
width: 75px!important;
}

.wp-table-reloaded-id-6 th, .wp-table-reloaded-id-2 .sorting {
background-color: #999999!important;
}

.wp-table-reloaded-id-6 .sorting_asc, .wp-table-reloaded-id-2 .sorting_desc {
background-color: #999999!important;
}

.wp-table-reloaded-id-6 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #111111!important;
}
.wp-table-reloaded-id-6 th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff!important;
}
.wp-table-reloaded-id-6 .column-2 {
width: 75px!important;
}

.wp-table-reloaded-id-6 .column-4 {
width: 75px!important;
}

Many thanks

Chris

Hi,

what’s the link to the page with the two tables underneath each other?

The CSS looks ok on first glance, so I assume that something else is messing with the widths here.

Regards,
Tobias

Here’s the link…

https://www.toppaydayloans.co.uk

Regards

Chris

Hi,

I assume that this is the result of how the browser calculates the widths of the columns. You are currently setting the width of two columns to be equal but the remaining columns are still “free” (so that the browser determines the width based on the content/text in the cells).

Regards,
Tobias