Текстовое поле ввода HTML с шириной 100%-х ячеек таблицы переполнения

Question

Текстовое поле ввода HTML с шириной 100%-х ячеек таблицы переполнения

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

В простом примере ниже поля ввода пробегаются через границу ячеек таблицы, результат ужасен. Это было протестировано, и это происходит таким же образом на: Firefox, IE7 и Safari.

Это имеет смысл для Вас? Я пропускаю что-то, Вы знаете о возможном решении?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html><head>    
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
   <title>Test input text in table</title>
   <style type="text/css">      
      table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
      table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
      input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
   </style>    
</head><body>

<table cellpadding="0" cellspacing="0">
   <tr>
      <td><p>column one hello babe babe babe</p></td>
      <td><p>column two hello babe more</p></td>
      <td><p>column three hello babe more and more</p></td>
   </tr>
   <tr>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
   </tr>
</table>

</body></html>

104

html-table html input width

задан Brian Tompsett - 汤莱恩 23 May 2017 в 19:36

1 ответ

Другие вопросы по тегам:

html-table html input width

Похожие вопросы:

score 24 · Answer 1

Значение ширины не учитывает границы или отступы:

http://www.htmldog.com/reference/cssproperties/width/

У вас будет 2 пикселя отступа с каждой стороны плюс 1 пиксель границы с каждой стороны.
100% + 2 * (2px + 1px) = 100% + 6px, что больше, чем 100% дочернего содержимого родительского td.

У вас есть возможность:

Либо установить box-sizing: border-box; согласно @ pricco answer ;
) Или использовать 0 полей и отступов ( избегая лишнего размера).