Ввод текста с шириной 100% внутри td расширяется / продолжается за пределами td

Вот живая демонстрация

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

CSS

table{ border: solid 1px gray; width: 90%; } input{ width: 100%; padding:10px; } 

HTML

 
Hello

Solutions Collecting From Web of "Ввод текста с шириной 100% внутри td расширяется / продолжается за пределами td"

объяснение

Вот ссылка на модель W3C Box, которая подробно объясняет, что происходит с вашим элементом.

Модель коробки W3C – – – – – две коробчатые модели

Все входные элементы имеют границы по умолчанию и могут также иметь отступы и поля, но самое главное, это следует за спецификациями модели коробки W3C с помощью контейнера content-box .

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


Решение

Добавьте дополнение к td, чтобы вручную отрегулировать ширину ввода до тех пор, пока он не появится там, где вы хотите. Помните, что добавление отступов к вводу означает, что вы должны добавить ту же сумму в td, чтобы противодействовать расширению.

Вот живой пример

 input { width: 100%; padding: 10px; margin: 0px; } table .last, td:last-child { padding: 2px 24px 2px 0px; } 

Альтернативное решение

Вы также можете использовать версию CSS3, используя размер windows ( совместимость браузера ).
Это свойство можно использовать для переключения между двумя коробками и заставить его вести себя так, как вы ожидали.

Вот живой пример

 input { width: 100%; padding: 10px; margin: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

Вот несколько возможных дубликатов одного и того же вопроса

  • могу ли я остановить текстовые поля шириной 100% от расширения их контейнеров
  • Проблема с типом ввода = «текст» и ширина текстовой области
  • 100% Ширина div и элементов формы + дополнение?

Просто. 100% ширина + обивка, вот почему. Вы должны установить дополнение для обертки, а не ввод

вы можете использовать свойство box-sizing для этого, потому что padding добавляет width в поле ввода.

CSS:

 input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; } 

но он не работает IE7

Самый простой способ – установить прописку в процентах от ширины, вычесть из 100%.

Так:

 input { width:96%; padding:0 2%; }