Как растянуть поле ввода до полной ширины?

У меня простая форма HTML. Я хотел бы, чтобы правые виджеты во втором столбце (текстовое поле, combox и т.д.) Растягивали и заполняли полный столбец.

Мой HTML выглядит так:

<table class="formTable">
  <tr>
    <td class="col1">Report Number</td>
    <td class="col2"><input type="text"/></td>
  </tr>
  <tr>
    <td class="col1">Report Type</td>
    <td class="col2"><select></select></td>
  </tr>
</table>

Мой CSS выглядит так:

.formTable {
  border-color: black;
}

.formTable td {
  padding: 10px;
}

.formTable .col1 {
  text-align: right;
}

.formTable .col2 {
  width: 100%;
}

Любые идеи?

Ответ 1

Вы можете указать, что все дочерние элементы класса "col2" имеют ширину 100%, добавив следующее:

.col2 * { width:100%;}

См. мой пример dabblet: http://dabblet.com/gist/2227353

Ответ 2

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

<ul class="formList">
    <li>
        <label for="input_1">
            Report Number
        </label>
        <input id="input_1" name="input_1" type="text" />
    </li>
    <li>
        <label for="input_2">
            Report Type
        </label>
        <select id="input_2" name="input_2"></select>
    </li>
</ul>

Затем добавьте CSS:

.formList {
    border:1px solid #000;
    padding:10px;
    margin:10px;
}
label {
    width:200px;
    margin-left:-200px;
    float:left;
}
input, select {
    width:100%;
}
li {
    padding-left:200px;
}

Пример скрипта JS: http://jsfiddle.net/6EyGK/

Ответ 3

Вы можете использовать:

.col2 * {
    width: 100%;
}

Для соответствия любому потоку .col2. как вы можете видеть здесь. Или:

.col2 > * {
    width: 100%;
}

Чтобы соответствовать только непосредственным детям.

Ответ 4

при использовании Twitter Bootstrap: и ввод находится внутри столбца

просто добавьте к <input> class="container-fluid"

Ответ 5

Другая смысловая разметка, дополнительная для Мэтью Дарнелла, отвечает:

Если вы оберните метки вокруг входов и выберите, вы можете избежать использования атрибутов for и id.

<ul class="formList">
    <li>
        <label>
            Report Number
        <input name="input_1" type="text" />
        </label>
    </li>
    <li>
        <label>
            Report Type
        <select name="input_2"></select>
        </label>
    </li>
</ul>

Или используйте список определений, который может дать вам дополнительный контроль

<dl class="formList">
    <dt>
        <label for="input_1">
            Report Number
        </label>
    </dt>
    <dd>
        <input id="input_1" name="input_1" type="text" />
    </dd>
    <dt>
        <label for="input_2">
            Report Type
        </label>
    </dt>
    <dd>
        <select id="input_2" name="input_2"></select>
    </dt>
</dl>