Geek asks and answers

Can CSS make a conditional maximum width or minimum width for the objects themselves?

Without using JavaScript, is there a way in CSS to say something like “whitespace: nowrap” specifically for td, but only if td has a maximum width of a certain size?

I know that you can do @media to do css only for certain screen sizes. I want css to be applied only when a certain object has a certain size.

+3
source share
1 answer

You need JavaScript to do exactly what you want, but there is a possibility:

Say you applied the class to some <td>s:

<td class="changed">...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td class="changed">...</td>
<td>...</td>

And you gave .changeda certain max-width:

.changed {
    max-width: 100px;
}

Then you can do what you want:

td:not(.changed) {
    /*Some styling*/
}
+1
source

More articles:


All Articles