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

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

FWIW, таблица основана на подключаемом модуле jQuery DataTables.

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


html layout css datatables
person Serge Wautier    schedule 03.02.2010    source источник
comment
См. мой ответ здесь о flex и flex-grow: stackoverflow.com/a/52975265/1599699   -  person Andrew    schedule 24.10.2018

Ответы (4)


arrow_upward
19
arrow_downward

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

person ntan    schedule 03.02.2010
comment
Я не совсем уверен, но я думаю, что с этим подходом может быть проблема, поскольку границы и отступы текстового поля занимают некоторое место, которое добавляется к ширине. То есть, если td имеет ширину 100 пикселей, а текстовое поле имеет, скажем, границу 1 пиксель и отступ 4 пикселя, текстовому полю потребуется общая ширина 100 + 2 * (1 + 4) = 110 пикселей, если установлено значение width = 100. %. Я думаю. - person Anders Fjeldstad; 03.02.2010
comment
Ха! Так просто! Отлично работает в IE8, но не в Chrome: процент ширины соответствует ширине столбца, но при этом столбцы расширяются. - person Serge Wautier; 03.02.2010
comment
Вы можете попробовать width:auto или width:inherit - person ntan; 03.02.2010
comment
Ширина auto/inherit не подойдет, нужно 100%. Если вы обнаружите, что дополнительный размер влияет на ширину столбцов, это означает, что вы должны использовать макет таблицы по умолчанию auto. Обычно вам не нужна автоматическая компоновка таблицы, поскольку она медленная и непредсказуемая. Лучше всего установить table-layout: fixed и задать столбцам, которые вы хотите зафиксировать, явную ширину (в первой строке ячеек или, лучше, с <col>). Столбцы без явно заданной ширины делят между собой оставшуюся ширину. - person bobince; 03.02.2010
comment
Все заработало, когда я избавился от некоторых спецификаций ширины столбца. Думаю, я никогда не узнаю, почему! - person Serge Wautier; 04.02.2010

arrow_upward
10
arrow_downward

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

Верно.

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

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

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

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

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

person bobince    schedule 03.02.2010

arrow_upward
2
arrow_downward

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

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

td > input[type="text"] {width: 5em;} /* or whatever */
person David says reinstate Monica    schedule 03.02.2010

arrow_upward
0
arrow_downward 

  table td {white-space: nowrap;}
  table th {white-space: nowrap;}

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

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

person rashidnk    schedule 05.09.2018