Darstellung entweder Zeilenweise oder spaltenweise

[ursus contionabundo]

Du hast:

<td>100 - 600</td>

Das müsstest Du wohl ändern:

<td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>

Im CSS dann ein Media-Query:

span.tdbreak {
   display:inline;
}

@media (max-device-width: 70em) {
   span.tdbreak {
       display:block;
       width:100%;
       padding:0;
       margin:0;
       text-align:center;
   }
}

Den Wert der Breite des Ausgabeports ( des Browser-Fensters ) bei dem Du umbrechen willst musst du selbst herausfinden. Und nimm dort nicht etwa Pixel...

Freilich kannst Du auch versuchen:

<style>
span.nobreak {
    white-space: nowrap
}
</style>

<td>100<span class="nobreak">&nbsp;-&nbsp;</span>600</td>

notieren. Das funktioniert aber nur wenn die Zahlen höchstens dreistellig sind, genauer genommen höchstens so breit dargestellt werden wie das Minus-Zeichen und die beiden No-Breaking-Spaces.

Hinweise:

• Vielleicht findest Du in veralteten Quellen noch <nobr>. Das soll man aber nicht verwenden!

• Die Lösung mit dem Media-Query ist also stabiler.

• Gib die Breite im Media-Query nicht in Pixeln an! Das ist mindestens in diesem Fall falsch.

• Achte darauf, etwas großzügig zu sein, auf meinem Linux werden z.b. Zeichen vieler Schriftarten etwas breiter dargestellt als unter Windows. Viele Webseiten sehen aus diesem Grund unter Linux "einfach sch..." aus!