текстовые поля в таблице HTML: как автоматически изменять размер? - PullRequest
Новая
       10

текстовые поля в таблице HTML: как автоматически изменять размер?

8 голосов
/ 03 февраля 2010

Я хочу добавить строку внизу моей таблицы HTML (или вверху, что угодно) с текстовым полем в каждом столбце (чтобы разрешить фильтрацию содержимого каждого столбца).

FWIW, таблица основана на плагине jQuery DataTables.

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

Ответы [ 4 ]

19 голосов
/ 03 февраля 2010

попробуйте <input type="text" style="width:100%"/>, чтобы получить ширину родительского тд.

10 голосов
/ 03 февраля 2010

Я думаю, что [ширина 100%] может быть проблемой при таком подходе, так как границы и отступы текстового поля занимают часть, добавляемую к ширине.

Действительно.

Вы можете компенсировать это, добавив padding-right к ячейке, содержащей вход (или только ко всем ячейкам), аналогичного размера, к границам и отступам ввода. Затем ввод расширяется за пределы области содержимого ячейки, но только на отступы, поэтому он не создает беспорядка.

Это нормально для обычного ввода текста. Если у вас также есть другие элементы, такие как поля выбора или кнопки, которые вы хотите изменить таким образом, метод заполнения может иметь неприятные последствия, потому что в IE «ширина» выбора включает границы и отступы (из-за того, что это виджет OS ).

Для большинства браузеров самый простой и последовательный способ исправить это - это свойство CSS3 box-sizing : 

td.input input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

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

2 голосов
/ 03 февраля 2010

Я не использовал таблицы jQuery, но я предполагаю, что если вы установите 'width: 80%;' и определите ширину для 'td', текстовое поле должно наследовать свои размеры от своего родителя ('td').

Если это не сработает или вы хотите использовать другой подход, вы можете попробовать: 

td > input[type="text"] {width: 5em;} /* or whatever */
0 голосов
/ 05 сентября 2018 
  table td {white-space: nowrap;}
  table th {white-space: nowrap;}

  td input[type="text"] {width: 100%;}

используйте !important для переопределения других правил CSS

...