Текстовое поле ввода 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>

ОТВЕТЫ

Ответ 1

Вы можете использовать свойство CSS3 box-sizing для включения внешнего дополнения и рамки:

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

Ответ 2

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

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

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

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

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

Ответ 3

Проблема с такими вещами, как width:95%; заключается в том, что они не выглядят правильно в широких гибких макетах (потому что 5% могут быть похожими на 30 пикселей).

Следующие решения работают очень хорошо для меня (протестировано в Firefox, IE 9, Safari):

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
</tr>
</table>

(добавлены цвета, чтобы было легче заметить правильное заполнение)

Трюк состоит в том, чтобы обернуть ввод двумя div, внешний имеет 3px margin (что делает его на 3px меньше, чем td), внутреннее имеет 3px дополнение. Это делает вход 6px меньше, чем td, с чего вы хотели начать.

Я не уверен в механизме этого, но он работает.

В этом простом примере он также работает только с одним div с правом полем 6. Однако в случае с моим веб-приложением работает только указанное выше решение.

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
</tr>
</table>

Ответ 4

Проблема была объяснена ранее, поэтому я буду только повторять: ширина не учитывает границы и отступы. Один из возможных ответов на этот вопрос, который не обсуждался, но который я нашел, помог мне собраться, чтобы обернуть ваши входы. Вот код, и я объясню, как это помогает через секунду:

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

У DIV-упаковки INPUT нет прокладки и нет границы. Это решение. DIV будет расширяться до размера контейнера, но он будет также учитывать границы и дополнения. Теперь у INPUT не будет проблем с расширением размера его контейнера, поскольку он не имеет границ и без пропусков. Также обратите внимание, что DIV имеет переполнение, которое скрыто. Похоже, что по умолчанию элементы могут выходить за пределы своего контейнера с переполнением по умолчанию видимого. Это просто гарантирует, что вход остается внутри его контейнера и не пытается просочиться.

Я тестировал это в Chrome и Fire Fox. Оба, похоже, хорошо относятся к этому решению.

UPDATE. Поскольку я просто получил случайный снимок, я хотел бы сказать, что лучший способ справиться с переполнением - это атрибут размера окна CSS3, описанный pricco:

.myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

Это, кажется, довольно хорошо поддерживается основными браузерами и не "хаки", как трюк переполнения. Тем не менее, существуют некоторые незначительные проблемы в текущих браузерах с этим подходом (см. http://caniuse.com/#search=box-sizing Известные проблемы).

Ответ 5

Я знаю, что этот вопрос составляет 3 года, но проблема по-прежнему сохраняется для текущих браузеров, и люди все еще приходят сюда. На данный момент решение calc():

input {
    width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
    width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}

Он поддерживается большинством современных браузеров.

Ответ 6

Проблема связана с моделью блока ввода. Недавно я нашел хорошее решение проблемы при попытке сохранить мой вход на 100% для мобильных устройств.

Оберните свой ввод другим элементом, например, div. Затем примените стиль, который вы хотите для своего ввода, к обертке div. Например:

<div class="input-wrapper">
 <input type="text" />
</div>

.input-wrapper {
    border-raius:5px;
    padding:10px;
}
.input-wrapper input[type=text] {
    width:100%;
    font-size:16px;
}

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

Ответ 7

Я исправил эту проблему, начиная с ответа @hallodom. Все мои входы содержались внутри li, поэтому все, что мне нужно было сделать, это установить переполнение li: скрыто для удаления избыточного входного потока.

.ie7 form li {
  width:100%;
  overflow:hidden;
}

.ie7 input {
  width:100%;
}

Ответ 8

вместо этой маржиной борьбы просто

input{
    width:100%;
    background:transparent !important;
}

Таким образом, граница ячейки видима, и вы можете управлять цветом фона строки

Ответ 9

Выньте "http://www.w3.org/TR/html4/loose.dtd" из декларации DOCTYPE и устраните вашу проблему.

Ура!:)

Ответ 10

С помощью некоторого Javascript вы можете получить точную ширину содержащего TD и затем назначить его непосредственно элементу ввода.

Ниже представлен необработанный javascript, но jQuery сделает его более чистым...

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        el.style.width = pEl.offsetWidth;
    }
}

Проблемы с этим решением:

1) Если у вас есть ваши входы, содержащиеся в другом элементе, таком как SPAN, вам понадобится петля и найти TD, потому что такие элементы, как SPAN, будут обертывать ввод и показывать его размер, а не ограничиваться размером TD.

2) Если у вас есть добавка или поля, добавленные на разных уровнях, вам может потребоваться явно вычесть это из [pEl.offsetWidth]. В зависимости от вашей структуры HTML, которая может быть рассчитана.

3) Если столбцы таблицы имеют динамический размер, то изменение размера одного элемента приведет к тому, что таблица переработает в некоторых браузерах, и вы можете получить ступенчатый эффект, поскольку вы последовательно "фиксируете" размеры ввода. Решение состоит в том, чтобы назначить определенную ширину столбцу либо в процентах, либо в пикселях ИЛИ собрать новые ширины и установить их после. См. Код ниже..

var inputs = document.getElementsByTagName('input');
var newSizes = [];
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        newSizes.push( { el: el, width: pEl.offsetWidth });
    }
}

// Set the sizes AFTER to avoid stepping...
for (var i = 0; i < newSizes.length; i++)
{
    newSizes[i].el.style.width = newSizes[i].width;
}

Ответ 11

Я решил проблему, применив box-sizing:border-box; к самим ячейкам таблицы, помимо того же, что и вход и оболочка.

Ответ 12

Я решил проблему, используя этот

tr td input[type=text] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  background:transparent !important;
  border: 0px;
}

Ответ 13

Я обычно устанавливаю ширину моих входов на 99%, чтобы исправить это:

input {
    width: 99%;
}

Вы также можете удалить стили по умолчанию, но это сделает менее очевидным, что это текстовое поле. Тем не менее, я покажу код для этого:

input {
    width: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Ad @м

Ответ 14

Проблема заключается в border-width входного элемента. В скором времени попробуйте установить margin-left входного элемента на -2px.

table input {
  margin-left: -2px;
}

Ответ 15

У меня была точно такая же проблема и она была решена так:

input[type="text"] {width: 95%;}