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

HTML & CSS
1

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:

.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

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

That’s exactly what I was looking for, thank you.