Как установить ширину текстового поля в ячейку таблицы CSS

Question

Я работаю с mvc webgrid, который отображает таблицу во время выполнения. Я хочу, чтобы моя ширина текстового поля была такой же, как ширина ячейки таблицы. каждая ячейка таблицы имеет некоторые с и когда я устанавливаю текстовое поле width=100%, тогда UI становится испорченным. я использую ниже CSS

.edit-mode { 
    width: 100%; 
    display: inline; 
} 

так я ищу помощь относительно CSS. вот изображение моей сетки.

вот ссылка jsfiddle, где каждый может видеть мой код css и html. https://jsfiddle.net/tridip/qvy0y8sk/

ищет руководство для css.

Answer 1

Добавить это ваш стиль ввода:

display: inline; 
width: 100%; 
height: 100% 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
border: none; /* if you want no box around the input field */ 

также в стиле пД эти входы удалить padding spec

Answer 2

Если я понял правильно, вам нужно box-sizing применить правильную ширину: Fiddle

td input, td button { 
    box-sizing:border-box; 
    display:block; 
    width:100%; 
} 

Answer 3

Добавьте это правило CSS в конец вашего и поле ввода будет расширяться t o ширина ячейки.

.edit-mode { 
    width: 100%; 
} 

Вот updated fiddle ваш, показывая его

Если вы хотите, чтобы подтолкнуть его за пределы отступов вы могли бы сделать, как это.

.edit-mode { 
    width: calc(100% + 5px); 
    margin-left: -5px; 
}