Как сделать так, чтобы элемент ввода с отступом 5px заполнял всю <td>?

Question

У меня есть текстовый ввод внутри <td> с отступом 5px; При установке его ширины на 100% он выходит за границы <td> для 10px. Есть ли способ заставить его заполнить все <td> (т.е. на практике его ширина должна стать 100% - 10px) без использования JavaScript?

Заранее спасибо

Answer 1

Я задавал этот вопрос еще в 2010 году, и, насколько я помню, тогда не было разумного решения.

Однако благодаря CSS3 теперь доступны два решения:

Использовать Размер коробки

box-sizing: border-box;
width: 100%;

Использовать calc

width: calc(100% - 10px);

В некоторых браузерах может потребоваться префикс поставщика (например, width: -moz-calc(100% - 10px);).

Answer 2

Если вы измените его на display: block, он расширится, чтобы заполнить ширину родителя.

Answer 3

См. http://www.w3schools.com/css/css_boxmodel.asp

Звучит не так, как будто это будет работать, так как ширина css является только контентом, а дополнение является дополнением к.

Так что, если вы указываетесодержание до 100%, а отступ - 5px, а затем - 100% + 5px.

Звучит так, как будто вам действительно не нужно заполнение в этой ситуации, так как это единственный элемент в td,поэтому я мог бы рассмотреть возможность переопределения унаследованного значения отступа для элемента, по крайней мере, левого и правого, такого как:

<input type="text" style="width:100%; padding-left:0px; padding-right:0px;"/>

Другим подходом было бы использование немного меньшего процента, например 95% или 90%.

Answer 4

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