Это просто невозможно в css без javascript. Я сделал короткий скрипт, который проверяет, является ли ширина больше 119, и если да, то устанавливает стиль элементов на обычную упаковку так, как вы хотели.
var a = document.querySelectorAll("th");
a.forEach((a) => {
if(a.offsetWidth > 119) {
a.style.whiteSpace = "normal";
}else {
console.log(a.offsetWidth);
}
});
![enter image description here](https://i.stack.imgur.com/qI4P9.png)
Полный код
html
<main>
<table>
<tr>
<th class="t">One</th>
<th>One Two</th>
<th>One Two Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Seven Eight</th>
<th>Seven Eight Nine</th>
<th>Seven Eight Nine Ten</th>
</tr>
</table>
</main>
<script type="text/javascript">
var a = document.querySelectorAll("th");
a.forEach((a) => {
if(a.offsetWidth > 119) {
a.style.whiteSpace = "normal";
}else {
console.log(a.offsetWidth);
}
});
</script>
css
main {
max-width: 600px;
overflow: hidden;
}
th {
background: #ccc;
padding: 2px 5px;
white-space: nowrap;
max-width: 120px;
}