Ответ 1
Вы можете использовать свойство CSS3 box-sizing для включения внешнего дополнения и рамки:
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
Текстовое поле ввода 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>
Ответы
Ответ 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%;}