С помощью некоторого Javascript вы можете получить точную ширину содержащего TD, а затем назначить ее непосредственно элементу ввода.
Ниже приведен необработанный javascript, но jQuery сделает его чище ...
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
var el = inputs[i];
if (el.style.width == '100%')
{
var pEl = el.parentNode; // Assumes the parent node is the TD...
el.style.width = pEl.offsetWidth;
}
}
Проблемы с этим решением:
1) Если ваши входные данные содержатся в другом элементе, таком как SPAN, то вам нужно будет выполнить цикл и найти TD, потому что такие элементы, как SPAN, обернут вход и покажут его размер, а не ограничиваются размером TD .
2) Если у вас есть отступы или поля, добавленные на разных уровнях, возможно, вам придется явно вычесть это из [pEl.offsetWidth]. В зависимости от вашей структуры HTML, которая может быть рассчитана.
3) Если столбцы таблицы имеют динамический размер, то изменение размера одного элемента приведет к тому, что таблица будет переформатирована в некоторых браузерах, и вы можете получить пошаговый эффект при последовательном «исправлении» входных размеров. Решение состоит в том, чтобы назначить конкретную ширину столбцу в виде процентов или пикселей ИЛИ собрать новые значения ширины и установить их после. Смотрите код ниже ..
var inputs = document.getElementsByTagName('input');
var newSizes = [];
for (var i = 0; i < inputs.length; i++)
{
var el = inputs[i];
if (el.style.width == '100%')
{
var pEl = el.parentNode; // Assumes the parent node is the TD...
newSizes.push( { el: el, width: pEl.offsetWidth });
}
}
// Set the sizes AFTER to avoid stepping...
for (var i = 0; i < newSizes.length; i++)
{
newSizes[i].el.style.width = newSizes[i].width;
}