Как заставить два элемента всегда оставаться на одной строке в <td>

Код довольно прост:

<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>

Они остаются аккуратно в одной строке, если текст в ярлыке не становится очень длинным, и таблица должна растягиваться, чтобы разместить его, а затем текст иногда становится принудительным под этим флажком. Как я могу остановить это от этого?

Ответ 1

Вы можете заставить встроенные элементы оставаться в одной строке с использованием свойства CSS white-space:

<td style="white-space:nowrap;">
  this content will not be wrapped
</td>

Ответ 2

Вы можете использовать это: <tr valign="top"> Это приведет к выравниванию по вертикали вверху.

Ответ 3

Определение white-space может быть одним из способов сделать это, но как табличные данные, лучше, если вы исправите максимальный размер ширины метки вместо

label { width: 100px; display: inline-block; }

Ответ 4

Этот код работает нормально и реагирует:

table {
width:100%;
display: inline-block;
}
td, th {
max-width:100%
}