April 4, 2012
How can I force two elements to always stay on the same line in a <td>
Question by Bogdan
The code is pretty simple:
<table id="tabel_user" style="width: 100%; border: 0; background-color: white;" cellpadding="0" cellspacing="0">
<tr>
<td style="border: 0; padding: 0; padding-left: 5px;">
<label for="abcd"><input class="check_useri" id="abcd" name="abcd" type="checkbox" /> abcd </label>
</td>
</tr>
</table>
They stay neatly on the same line unless the text in the label gets really long and the table needs to stretch to accomodate it, then the text sometimes gets forced below the checkbox. How can I stop it from doing that?
Answer by Lukas Eder
You can force inline elements to stay on the same line using the CSS property white-space:
<td style="white-space:nowrap;">
this content will not be wrapped
</td>
Answer by Starx
Defining a white-space may be one of the way to get it done, but as a tabular data, its better if you fix the max size of width of the label instead
label { width: 100px; display: inline-block; }
