Почему таблица html и текстовое поле не совпадают, хотя они имеют одинаковую ширину в CSS?

Question

У меня есть форма веб-страницы с текстовым полем в одной строке и таблицей в следующей строке.

В моем CSS, у меня есть и с той же ширины:

#myTable { 
width: 745px; 
border: 1px solid; 
border-collapse: collapse; 

}

.fullRowTextBox { 
    width: 745px; 
    border: 1px solid; 
} 

но текстовое поле, кажется, немного больше, чем этот стол. Есть ли причина, по которой я не смог бы сделать текстовое поле и таблицу той же шириной?

Answer 1

В текстовом поле по умолчанию есть padding. Удалите ее с

.fullRowTextBox { 
    padding: 0; 
} 

В этом случае ваш таблицы width должен компенсировать border, поскольку таблицы по-умолчанию использовать box-sizing: border-box. Поэтому установите width таблицы в текстовое поле width + 2px.

В качестве альтернативы можно установить box-sizing. При этом ваши #myTable и .fullRowTextBox могут иметь тот же комплект width.

.fullRowTextBox { 
    box-sizing: border-box; 
} 

Внимание: Этот подход не может быть compatible with older browsers. И вы должны добавить vendor prefixes.