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

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

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

CSS

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

HTML

<table>
  <tr>
    <td style="width:150px;">Hello</td>
    <td><input type='text' value='hihihih'/></td>
  </tr>
</table>

Ответ 1

Объяснение

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

- - - - -

Все элементы ввода имеют границы по умолчанию и могут также иметь отступы и поля, но самое главное, это следует за спецификациями модели коробки 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, используя размер окна (совместимость браузера).
Это свойство можно использовать для переключения между двумя коробками и будет вести себя так, как вы ожидали.

Здесь живой пример

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

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

Ответ 2

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

Ответ 3

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

CSS

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

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

Ответ 4

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

Итак:

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

Ответ 5

я нашел

<td><input type='text' value='hihihih'/>

работает смешно, попробуйте

<td>&nbsp;<input type='text' value='hihihih'/>

Кажется, это творит чудеса. Хотя, чтобы быть правдивым, использовался размер = число, а не ширина = 100%, по какой-то неизвестной причине текст был за пределами таблицы!