Column Width & Vertical Alignment

Resolved nofxbam
(@nofxbam)

13 years, 3 months ago

Hi,

I’ve been reading the forums for tips and have tried a few methods but I’m still having trouble with column width and vertical alignment. It could be my theme is interfering but I wanted to check. Here is the page (table under computer image): http://www.agilebts.com/zoho-crm-test/

Here is the custom css I’m using:

.tablepress thead th,
.tablepress tfoot th {
background-color: #ffffff;
}

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

.tablepress-id-1 .column-1 td {
vertical-align: middle;
width: 25px;
padding: 0;
}

.tablepress-id-1 .column-2 td {
vertical-align: middle;
width: 50px;
padding: 0;
}

.tablepress-id-1 .column-3 td {
vertical-align: middle;
width: 25px;
padding: 0;
}

.tablepress-id-1 .column-4 td {
vertical-align: middle;
width: 50px;
padding: 0;
}

Are you seeing anything wrong with the code I have listed above?

http://ww.wp.xz.cn/extend/plugins/tablepress/

Viewing 15 replies - 1 through 15 (of 20 total)

1 2 →

Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago
Hi,

thanks for your post, and sorry for the trouble.

The main problem, that I see, is that in your “Custom CSS” the td is written as a child of the .column-123 selectors, when it actually is that selector. So, with that, the selector needs to be
```
.tablepress-id-1 .column-1 {
```
instead of
```
.tablepress-id-1 .column-1 td {
```
Additionally, you can do some optimizations, so that I recommend to try this as your full “Custom CSS”:
```
.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	border: none;
}

.tablepress-id-1 {
    width: auto;
}

.tablepress-id-1 img {
    margin: 0;
}

.tablepress-id-1 .column-1,
.tablepress-id-1 .column-3 {
	width: 35px;
	vertical-align: middle;
}

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-4 {
	width: 50px;
}
```
Regards,
Tobias
Thread Starter nofxbam
(@nofxbam)

13 years, 3 months ago

Thank you for your quick response and being so helpful!

Thread Starter nofxbam
(@nofxbam)

13 years, 3 months ago

I have another question. How can I add more space between the 2nd and 3rd columns?

There’s a second table below the first one I created that I want to space out a little.
Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago
Hi,

good to see that this worked! 🙂

To space those columns out a little bit, I recommend to add some padding to the left of the third column, with this:
```
.tablepress-id-2 .column-3 {
    padding-left: 20px;
}
```
Regards,
Tobias
Thread Starter nofxbam
(@nofxbam)

13 years, 3 months ago
OK that definitely moved the column start over which is good. When I did that, it made the spacing between the rows wider however and also added a little more space in between columns 1,2 and 3,4. Here is my current code:
```
.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	border: none;
	color: #000000;
}

.tablepress-id-1 {
	width: auto;
}

.tablepress-id-1 img {
	margin: 0;
}

.tablepress-id-1 .column-1,
.tablepress-id-1 .column-3 {
	width: 20px;
	vertical-align: middle;
	padding: 0;
}

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-4 {
	width: 135px;
	vertical-align: middle;
}

.tablepress-id-2,
.tablepress-id-2 tr,
.tablepress-id-2 tbody td,
.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th {
	border: none;
	color: #000000;
}

.tablepress-id-2 {
	width: auto;
}

.tablepress-id-2 img {
	margin: 0;
}

.tablepress-id-2 .column-1,
 {
	width: 20px;
	vertical-align: middle;
}

.tablepress-id-2 .column-3 {
	width: 20px;
	vertical-align: middle;
	padding-left: 75px;
}

.tablepress-id-2 .column-2,
.tablepress-id-2 .column-4 {
	width: 150px;
	vertical-align: middle;
}
```
Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago
Hi,

first: No need to post your “Custom CSS”, I can see that in the page 🙂

One minor thing: Please remove the comma in
```
.tablepress-id-2 .column-1,
 {
```
That is obsolete and could interfere.

So, is everything how you want it now? Or is there still something that you want to change?

Regards,
Tobias
Thread Starter nofxbam
(@nofxbam)

13 years, 3 months ago

OK that may have worked. How do I shorten the distance between the rows? They’re just a little too spaced out at the moment.
Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago
Hi,

for that, I recommend to remove the bottom padding for the cells:
```
.tablepress-id-2 tbody td {
    padding-bottom: 0px;
}
```
Regards,
Tobias
Thread Starter nofxbam
(@nofxbam)

13 years, 3 months ago

Awesome!

OK I think I’m all set now. Thank you for all of your help and patience with a newbie.

Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago

Hi,

sure, no problem! You are very welcome!

Best wishes,
Tobias

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

nycnml
(@nycnml)

13 years, 3 months ago

Hi Tobias,

I’ve read this thread and found it very helpful. I’m trying to follow along, and implement what i need for my site. I am trying to align all the images in the table to the bottom. That string of CSS I don’t seem to be able to ascertain.

My table can be seen at http://waterlogue.com/tips-001/

If you can let me know what CSS I can use to get all the images to the bottom, that would be great.

One other thing — there seems to be 8px of padding throughout the whole table. Is that specified in the custom settings, or is that something I can get rid of in my custom CSS?

Many thanks,
Nick
Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago
Hi,

thanks for your post!

Please try this CSS:
```
.tablepress-id-2 .row-1 td,
.tablepress-id-2 .row-3 td,
.tablepress-id-2 .row-5 td,
.tablepress-id-2 .row-7 td {
    vertical-align: bottom;
    width: 50%;
}
```
That will move the images to the bottom and will also make both column the same width.

And yes, all table cells have a default padding of 8px (in the TablePress default CSS). You can of course override that, just as you already have with setting the bottom padding of a few rows to 40px.
Removing the padding entirely will however move the text in the two columns right next to each other. So I’m not sure that changing the padding here is necessary.

Regards,
Tobias
nycnml
(@nycnml)

13 years, 3 months ago

Hi Tobias,

Worked perfectly, thanks! I appreciate the tip about the 50% thing. It makes sense. As to the 8px default padding, I suppose if I want to address it I can do so on an individual basis — that is, it’s more of an issue for the rows that have images. I think I have the skills to remove the padding from just those rows, but if you have a quick snippet at the ready, I wouldn’t be unhappy about it 😉

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

13 years, 3 months ago
Hi Nick,

sure, no problem! You are very welcome!

So, you want to remove the padding in the cells that have images (so that the images will be slightly bigger)?
Then just add a
```
padding: 0;
```
to the CSS declaration from my previous post.
That should do it.

Regards,
Tobias
nycnml
(@nycnml)

13 years, 3 months ago

Hi Tobias,

Thanks — confession: I am a bit confused. I’m not sure where to add that “padding: 0;” line. Right now, my custom CSS looks like what’s pasted below.

.tablepress-id-2 tbody td {
font-family: Verdana;
font-size: 11px;
line-height: 1.6em;
color: #585660;
background-color: #fff;
}

.tablepress-id-2,
.tablepress-id-2 tr,
.tablepress-id-2 tbody td,
.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th {
border-top: #fff;
border-left: #fff;
border-right: #fff;
border-bottom: #fff;
background-color: #fff;
}

.tablepress-id-2 .row-2 td {
padding-bottom: 40px;
}

.tablepress-id-2 .row-1 td {
background-color: #fff;
}

.tablepress-id-2 .row-3 td {
background-color: #fff;
}

.tablepress-id-2 .row-5 td {
background-color: #fff;
}

.tablepress-id-2 .row-7 td {
background-color: #fff;
}

.tablepress-id-2 .row-4 td {
padding-bottom: 40px;
}

.tablepress-id-2 .row-6 td {
padding-bottom: 40px;
}

.tablepress-id-2 .row-8 td {
padding-bottom: 40px;
}

.tablepress-id-2 .row-1 td,
.tablepress-id-2 .row-3 td,
.tablepress-id-2 .row-5 td,
.tablepress-id-2 .row-7 td {
vertical-align: bottom;
width: 50%;
}

/* THIS IS THE SURF SCHOOL TABLE */
.tablepress-id-4 tbody td {
font-family: Verdana;
font-size: 11px;
line-height: 1.6em;
color: #585660;
background-color: #fff;
}

.tablepress-id-4,
.tablepress-id-4 tr,
.tablepress-id-4 tbody td,
.tablepress-id-4 thead th,
.tablepress-id-4 tfoot th {
border-top: #fff;
border-left: #fff;
border-right: #fff;
border-bottom: #fff;
background-color: #fff;
}

.tablepress-id-4 .row-2 td {
padding-bottom: 30px;
}

.tablepress-id-4 .row-1 td {
background-color: #fff;
}

.tablepress-id-4 .row-3 td {
background-color: #fff;
}

.tablepress-id-4 .row-5 td {
background-color: #fff;
}

.tablepress-id-4 .row-7 td {
background-color: #fff;
}

.tablepress-id-4 .row-4 td {
padding-bottom: 30px;
}

.tablepress-id-4 .row-6 td {
padding-bottom: 30px;
}

.tablepress-id-4 .row-8 td {
padding-bottom: 30px;
}

.tablepress-id-4 .row-1 td,
.tablepress-id-4 .row-3 td,
.tablepress-id-4 .row-5 td,
.tablepress-id-4 .row-7 td {
vertical-align: bottom;
width: 33%;
}

Can you tell me where, specifically, I should put the “padding 0” bit? Thanks so much, I appreciate the assist.

Regards,
Nick

Viewing 15 replies - 1 through 15 (of 20 total)

1 2 →

The topic ‘Column Width & Vertical Alignment’ is closed to new replies.