ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Supreme
• February 28, 2014 at 12:16 pm #52888
  Spukje

  Member

  Post count: 67

  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

  February 28, 2014 at 2:20 pm #52933
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 5, 2014 at 11:31 am #54441
  Spukje

  Member

  Post count: 67

  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

  March 5, 2014 at 11:56 am #54450
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 5, 2014 at 12:55 pm #54478
  Spukje

  Member

  Post count: 67

  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

  March 5, 2014 at 1:09 pm #54492
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

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

  How nth-child Works

  – Kyle

  March 5, 2014 at 4:19 pm #54610
  Spukje

  Member

  Post count: 67

  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

  March 5, 2014 at 4:22 pm #54613
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 5, 2014 at 5:56 pm #54640
  Spukje

  Member

  Post count: 67

  This reply has been marked as private.
  March 6, 2014 at 8:28 am #54747
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Not quite sure what you are trying to achieve?

  – Kyle

  March 6, 2014 at 8:52 am #54759
  Spukje

  Member

  Post count: 67

  This reply has been marked as private.
  March 6, 2014 at 9:50 am #54823
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 6, 2014 at 10:17 am #54848
  Spukje

  Member

  Post count: 67

  This reply has been marked as private.
  March 6, 2014 at 10:18 am #54851
  Spukje

  Member

  Post count: 67

  This reply has been marked as private.
  March 6, 2014 at 10:20 am #54857
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Please send me the link to the page

  – Kyle

• Back to forum

  Posted in: Supreme