SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selectively stopping table cell contents from wrapping. Is there a better way?

    I have a dashboard in my application that has several tables with thousands of rows to display tabular data. Some of the cells I don't want to wrap and others I do. I made a CSS class:

    Code CSS:
    .nowrap { white-space: nowrap; }

    Right now I'm applying the class to every single <td> that I don't want to wrap, which is easy when using PHP, but I can't help to think that CSS has better selectors to do this rather than applying it to every <td> that I don't want to wrap. So, is there a better selector I can use?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It really depends:
    is what is determining whether you want a TD to wrap? If it's actually it's content ( not the lenght of the content but what the content actually IS) then you are SOL.

    Otherwise the key is to find a PATTERN of the locations of the cells you want to not to wrap. Let's say you don't want the contents of the 3rd cell in all rows to wrap, but all other cells' content can wrap.
    #myTable tr td:nth-child(3) {...}

    If you are already using an identifier class on a cell that comes BEFORE the non-wrapped cell, you can use that too.
    for example:
    you are highlighting a specific cell in each row with the class "hey" and you want ALL other cells in that row that comes after the cells next to that not to wrap

    #myTable .hey + td ~ td {...}


    So again it's about pattern recognition.

    hope that helps

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    #myTable tr td:nth-child(3) {...}
    That's exactly what I was looking for, thank you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •