Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 4, 2015 at 1:52 pm #438871
    InfinityJane2013

    I would like to know how i can make the columns in a table in different widths…

    Etc. i have the first column with not a lot of text. I would like that text in a not so wide column and with the text to the right.

    Is it possible?like this

    May 4, 2015 at 2:18 pm #438884
    Guenni007

    i guess you used it as a price table

    goto table options and try data table !
    than the column width is set automatically to fit with the content

    May 4, 2015 at 2:49 pm #438913
    Guenni007

    and by the way for modern browsers you can select the columns via pseudo-class nth-child

    here you can see a test: http://webers-testseite.de/enf02/beispiel-seite/
    i gave to the table a class : tab1 ( look for custom class ) that only this table is influenced by the css style
    and than :

    .tab1 th:nth-child(1) {
    width: 20%;
}

.tab1 th:nth-child(2) {
    width: 30%;
}

    so the first column gets 20% the second 30% the third the rest

    Edit: i guess if you haven’t a table heading it will work with td too

    .tab1 td:nth-child(1) {
    width: 20%;
}
    • This reply was modified 8 years, 11 months ago by Guenni007.
    May 4, 2015 at 3:17 pm #438942
    Guenni007

    Again : this is not only for table a nice selector it works for nearly every element
    f.e. li on lists or p in a div
    you can choose every other child every second (the 2nd, 4th, 6th, 8th … Listpoint) by

    li:nth-child(2n)

    for this you can even use
    li:nth-child(odd) for li:nth-child(2n+1)
    li:nth-child(even) for li:nth-child(2n)

    • This reply was modified 8 years, 11 months ago by Guenni007.
    May 5, 2015 at 7:35 am #439544
    Rikard

    Hi @infinityjane2013!

    Did you try @Guenni007 suggestions above and did you have any luck with them?

    Cheers!
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.