it-roy-ru.com

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

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

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

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

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

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

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

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

Проблема с такими вещами, как 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>

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

Хитрость заключается в том, чтобы обернуть вход двумя делителями, внешний имеет 3px поле (что делает его на 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>
14
Andreas

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

<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 box-sizing, как описано у 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 Известные проблемы).

8
David Peterson

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

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

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

2
trojan

Проблема связана с блочной моделью элемента ввода. Я только недавно нашел хорошее решение этой проблемы, пытаясь сохранить 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;
}

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

1
hallodom

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

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

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

1
bortunac

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

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

.ie7 input {
  width:100%;
}
1
chet

Я решил проблему с помощью этого

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;
}
0
Kevin Muchwat

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

0
Vanco

С помощью некоторого 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) Если столбцы таблицы имеют динамический размер, то изменение размера одного элемента приведет к тому, что таблица будет переформатирована в некоторых браузерах, и вы можете получить пошаговый эффект при последовательном «исправлении» входных размеров. Решение состоит в том, чтобы назначить конкретную ширину столбцу в виде процентов или пикселей OR, чтобы собрать новые значения ширины и установить их после. Смотрите код ниже ..

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;
}
0
AnthonyVO

Извлеките «http://www.w3.org/TR/html4/loose.dtd» из декларации DOCTYPE, и это решит вашу проблему. 

Ура! :)

0
Lucian