Aligning cells

Resolved frequin
(@frequin)

9 years, 5 months ago

Hi there, I have 3 table press tables imbedded on a page, however they all have seperate alignment to each other. Is there something I can put in the custom CSS to make all the columns line up?

http://www.kristyhocking.com/wordpress/index.php/bio-2-2/

I have tried following the FAQ “How can I set column widths?”

and “The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all tables”

But it doesn’t seem to make and changes… maybe I’m entering the CSS incorrectly?

I’ve tried

“.tablepress .column {
width: 100px;
}

Viewing 10 replies - 1 through 10 (of 10 total)

maria_wp
(@maria_wp)

9 years, 5 months ago

it must be soemthing like

.tablepress-id-123 .column-1 {
width: 100px;
}
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 5 months ago
Hi,

thanks for your post, and sorry for the trouble.

CSS is indeed the best way, but you should specify the table ID and the column number, like
```
.tablepress-id-1 .column-1,
.tablepress-id-2 .column-1,
.tablepress-id-3 .column-1,
.tablepress-id-4 .column-1 {
  width: 300px;  
}
.tablepress-id-1 .column-2,
.tablepress-id-2 .column-2,
.tablepress-id-3 .column-2,
.tablepress-id-4 .column-2 {
  width: 100px;
}
```
Regards,
Tobias
Thread Starter frequin
(@frequin)

9 years, 5 months ago

Thanks so much for your help!

This has helped aligned the columns,

However is it possible to get them evenly spaced out across the screen? And remove the lines between the rows?

I’ve tried –

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: none;
}

As per the FAQ to remove lines from all tables but it doesn’t seem to do anything?

I’m trying to make it look more like this page
http://www.kristyhocking.com/wordpress/index.php/bio/
But using the table press plugin..

So far i’ve got it to look like this..
http://www.kristyhocking.com/wordpress/index.php/bio-2-2/

Thanks again.
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 5 months ago
Hi,

I just tested
```
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
  border: none;
}
```
on your site (in the browser developer tools) and it works fine. Please try adding that again.

For the spacing and column widths: Please remove the blocks that you are using right now and instead try
```
.page-id-401 .tablepress td {
    width: 33%;
}
```
That will basically set all columns of all tables on this page (which has the WordPress post ID 401) to one third of the page width.

Regards,
Tobias
Thread Starter frequin
(@frequin)

9 years, 5 months ago

Thanks, the column width/alignment is now correct.

But I still can not seem to get rid of the fine lines between each row.

This is exactly what I have in the custom CSS field…

.page-id-401 .tablepress td {
width: 33%;
}

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: none;
}

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 5 months ago

Hi,

when I check your links from above in Chrome or Firefox, I do not see any border lines in the tables?
Where exactly are you seeing them?

Regards,
Tobias

Thread Starter frequin
(@frequin)

9 years, 5 months ago

It looks correct in Chrome, I am using safari on mac however.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 5 months ago

Hi,

are you logged-in or logged-out in Chrome? Can you try in “Private browsing” session?

Regards,
Tobias

Thread Starter frequin
(@frequin)

9 years, 5 months ago

Sorry. just refreshed safari and the page is now displaying correctly!

Thank you for your help!

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 5 months ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

Best wishes,
Tobias

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

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Aligning cells’ is closed to new replies.