Сделать столбец таблицы HTML как можно меньше, но не меньше

Question

У меня есть столбец с метками и соответствующими текстовыми полями, а именно:

<table>
  <tr>
  <td>Label:</td>
  <td><input type="text"></input></td>
  </tr>
  <tr>
  <td>longer label:</td>
  <td><input type="text"></input></td>
  etc...

Я хочу убедиться, что первый столбец достаточно широк, чтобы разрешить текст в одну строку, но не шире, чем необходимо, чтобы обеспечить максимальное пространство для полей ввода (которые установлены на ширину 100%). Поэтому я не хочу устанавливать конкретный процент или явную ширину, просто сказать «как можно меньше, но не меньше».

Есть ли способ сделать это в необработанном HTML / CSS или я должен прибегнуть к Javascript?

(Очевидно, что если страница очень узкая, это недостижимо, но я не беспокоюсь о действительно узких браузерах.)

Answer 1

Пока вы не установите ширину для текста table, tr или td, td будет в одной строке. Если места недостаточно, вы можете использовать td {white-space:nowrap}. Это не позволит тексту перейти на вторую строку, но покажет полосу прокрутки.

Демо ( JsFiddle )

td {white-space:nowrap}

<table>
    <tr>
        <td>Label:</td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td>longer label:</td>
        <td><input type="text"></td>
    </tr>
     <tr>
        <td>longeeeeeeeeeest label:</td>
        <td><input type="text"></td>
    </tr>
</table>

Answer 2

Обязательно установите ширину стола на 100%. Вход с шириной 100% будет расширяться только до 100% своего родительского элемента. Поскольку таблица не имеет ширины 100% (такой же ширины, как ее содержимое), вы можете получить ввод странного размера.

Лично я бы просто нашел подходящую ширину и придерживался ее для ячеек метки. Особенно, если вы делаете это на нескольких страницах, чтобы они оставались согласованными.

Поскольку вы делаете что-то очень специфичное с обычными элементами HTML, я настоятельно рекомендую предоставить им класс CSS, чтобы не нарушать другие вещи. Ваша таблица и CSS могут выглядеть примерно так:

<style type="text/css">
    table.form{width:100%}
    td.label{width:150px;white-space:nowrap;}
    td input{width:100%;}
</style>

<table class="form">
    <tr>
        <td class="label">My label:</td>
        <td><input type="text" /></td>
    </tr>
</table>

Предостережение заключается в том, что макет на основе таблиц - это действительно плохой способ, но работать с тем, что вы знаете лучше всего, и выполнять свою работу.