Как исправить ширину столбца HTML до максимальной ширины его содержимого? - PullRequest
Новая
       12

Как исправить ширину столбца HTML до максимальной ширины его содержимого?

5 голосов
/ 01 сентября 2011

Я пытаюсь отформатировать таблицу для формы ввода следующим образом. Таблица выглядит примерно так: 

       Name:
Time of day:

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

  • Размер левого столбца автоматически определяется самой длинной меткой поля, так что метки поля никогда не оборачиваются.
  • Сами поля ввода расширяются вправо.

Конечно, я знаю, что могу исправить левый столбец, например, Длиной 20em, а другой столбец - 100%, но это не то, о чем я спрашиваю - я не хочу измерять, а затем вводить фиксированную ширину, например 20em; Я хотел бы, чтобы ширина была автоматически получена из ширины самого длинного элемента в этом столбце. Это звучит как довольно распространенное желание; Есть ли способ сделать это просто?

1 Ответ

7 голосов
/ 01 сентября 2011

Используйте стиль white-space: nowrap; CSS, как в коде ниже.Конечно, вы захотите добавить поля или отступы между двумя столбцами, чтобы двоеточие (:) не прижималось к полю ввода. jsFiddle Пример кода ниже

HTML: 

<table class="fullWidth">
    <tr>
        <td class="nowrap">Name:</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td class="nowrap">Time of Day:</td>
        <td><input type="text" /></td>
    </tr>
</table>

CSS: 

.nowrap {
    white-space: nowrap;  
    width: 1px;
}

.fullWidth {
    width: 100%;
}

input {
    width: 100%;
    display: block;   
}
...