Price table column width and text alignment

[Spukje]

Hello,
How can I change the width of the individual columns of a price table? If I make a pricetable, all the columns have the same width.

And how can I change the text alignment in the columns?? Now all the text is centered, I changed it to ‘left’, but I only want that for 1 column.

see also: http://quattrocycle-experience.nl/nieuw/huurprijzen/

Maybe you know a pricetable plug-in that will work for this kind of use??

Kind regards, Sjoukje

[Kyle – SUPPORT]

Hi

It is possible to change the width of the columns using css, however you would have to have good knowledge of css, and you will need to use :nth-child() to apply the widths to the certain columns.

Again for the text align, if you only want to apply it for one column you would need to use :nth-child()

Have a read of this: http://css-tricks.com/how-nth-child-works/

– Kyle

[Spukje]

Hi Kyle,

Thanks for the tip. Could you give a hint how to use the :nth-child() for the text-alignment of the first column of this page: http://quattrocycle-experience.nl/nieuw/huurprijzen/

In the style.css I see that this code is controlling the text alignment for the columns:

}
.labelled-pricing-table .pricing-table-label-row, .labelled-pricing-table .pricing-table-row {
text-align: center;
padding: 20px;
}

But I don’t know if I have to put the :nth-child() code here.

Regards, Sjoukje

[Kyle – SUPPORT]

Hi

Try this custom css:

.pricing-table-column:first-child .pricing-table-label-row, .labelled-pricing-table .pricing-table-column:first-child .pricing-table-row {
  text-align: left;
}

– Kyle

[Spukje]

Hi,

Thanks, that works good. And how can I manage the width of the second and third columns? I thought Like this:

}
.pricing-table-column:second-child .pricing-table-label-row, .labelled-pricing-table .pricing-table-column:second-child .pricing-table-row {
width: 50%;
}

But unfortunately it isn’t working

Sjoukje

[Kyle – SUPPORT]

Replace :second-child with :nth-child(2)

If you want to learn about it, have a read of this:

How nth-child Works

– Kyle

[Spukje]

Hi,
That works fine now. The awkward thing is, that the elements of the columns need different percentages to get them at the same width.

http://quattrocycle-experience.nl/nieuw/prijzen/?preview=true&preview_id=6461&preview_nonce=f48209ea4d

Now that the second and the 3 column are smaller, they aren’t connected to each other anymore. Is there a way to solve that as well??

thanks, Sjoukje

[Kyle – SUPPORT]

Hi

You need to make it so the total width of the columns add up to 100%, and then there should not be any space.

– Kyle

[Spukje]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Not quite sure what you are trying to achieve?

– Kyle

[Spukje]

This reply has been marked as private.

[Kyle – SUPPORT]

Is it on this page? Because I only see 2 columns not 3.

If you set up the pricing table for me I will try and provide the correct css to make the 1st column bigger.

– Kyle

[Spukje]

This reply has been marked as private.

[Spukje]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Please send me the link to the page

– Kyle