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

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

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

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

Ответы

Ответ 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>

Ответ 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>

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