Текстове поле введення HTML шириною 100% переповнює комірки таблиці

106

Хтось знає, чому вхідні елементи шириною 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

Я б радив, що якщо ви просто використовуєте таблицю для подання входів, ви можете перейти до використання a formз labels і inputs всередині ulабо ol. що є, принаймні, трохи більш смисловим. Звичайно, ви повинні використовувати a form, навіть якщо ви дотримуєтесь table.

— Девід говорить про відновлення Моніки

216

Ви можете використовувати box-sizingвластивість CSS3, щоб включити зовнішню прокладку та рамку:

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

— прикко
джерело

1

Сумно сказати, але, на жаль, IE 7 не справляється з розміром коробки правильно. Спробуйте наступне в IE 7 ... css3.info/preview/box-sizing або перегляньте css-tricks.com/box-sizing

— AnthonyVO

@AnthonyVO: правда, єдиний спосіб вирішення IE7 - це додавання для нього конкретних CSS, використовуючи умовні коментарі IE <!--[if lt IE 8]>іinput[type="text"] {width:95%}

— Marco Demaio

24

Значення ширини не враховує облямівку або прокладку:

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

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

У вас є можливість:

Або установка box-sizing: border-box;відповідно з @ відповідь pricco в ;
Або використовуючи 0 запасів і прокладки (уникаючи зайвих розмірів).

— ANeves
джерело

далі до відповіді Sr pts, ви можете встановити прокладку та межу 0px, тоді 100% повинні працювати.

— Мауро

Дійсно, навіть без встановлення накладки для td - дуже добре додається.

— ANeves

1

Крім того, якщо прокладка створює проблему, її можна використовувати text-indentдля імітації прокладки попереду переднього краю тексту та line-heightдля вертикальної прокладки (хоча збереження вертикальної прокладки ніяк не вплине на ширину).

— Девід каже, що поверніть Моніку

14

Проблема подібних речей 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 padding. Це робить вхід на 6px меншим, ніж td, з чого ви хотіли почати.

Я не впевнений у механіці цього, але це працює.

У цьому простому прикладі він також працює лише з одним ділом з правим запасом 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>

— Андреас
джерело

Це працює (авансований +1). Як не дивно, я вставив текст перед кожним <input> і додав "white-space: nowrap", щоб тримати їх в одному рядку, потім три <inputs> переповнили клітинки таблиці, якщо я видаляю "white-space: nowrap" все працює знову. Дивно.

— Жозе Мануель Абарка Родрігес

8

Проблему було роз'яснено раніше, тому я ще раз зазначу: ширина не враховує облямівку та прокладку. Один з можливих відповідей на це, не обговорюваний, але який я знайшов, допоміг мені купу, - це підвести свої дані. Ось код, і я поясню, як це допомагає за секунду:

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

DIV, що обгортає ВХОД, не має прокладки, а також не має рамки. Це рішення. DIV збільшиться до розміру свого контейнера, але він також буде враховувати облямівку та прокладку. Тепер INPUT не матиме жодних проблем, що розширюватимуться до розміру контейнера, оскільки він не має меж і не має прокладки. Також зауважте, що DIV має свій перелив встановлений на прихований. Здається, що за замовчуванням елементи можуть виходити за межі свого контейнера з переповненням видимих за замовчуванням. Це просто гарантує, що вхід залишається всередині контейнера і не намагається проскочити.

Я тестував це в Chrome і в Fire Fox. Здається, обидва добре розуміють це рішення.

ОНОВЛЕННЯ : Оскільки я щойно отримав випадковий поворот, я хотів би сказати, що кращий спосіб впоратися із переповненням - це атрибут розміру коробки 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 відомі проблеми).

— Девід Петерсон
джерело

3

Коротка примітка: overflow: hidden;оскільки вміст все ще «пробивається» на зовнішню сторону поля абсолютно точно так само, але він усікається, а не показується, тому не перекриває інший вміст.

— ANeves

2

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

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

Його підтримують більшість сучасних браузерів.

— троян
джерело

1

Проблема пов'язана з моделлю коробки вхідних елементів. Нещодавно я знайшов приємне рішення проблеми, намагаючись утримати свій внесок на 100% для мобільних пристроїв.

Оберніть свій вклад іншим елементом, наприклад, ділом. Потім застосуйте потрібний для вашого вкладу стиль до цього діва для обгортки. Наприклад:

<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-обгортку з закругленими кутовими накладками тощо, все, що ви хочете для вашого вводу, тоді дайте ширину вводу 100%. У вас добре вкладені дані з облямівкою тощо, але без дратівливого переповнення!

— халодом
джерело

1

Я вирішив це питання, починаючи з відповіді @ hallodom. Всі мої входи містилися в li, тому все, що мені потрібно було зробити, це встановити переповнення li: приховано для того, щоб видалити цей надлишковий вхід.

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

.ie7 input {
  width:100%;
}

— чет
джерело

1

замість цього марж боротьби просто зробити

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

таким чином видно межу комірки, і ви можете керувати кольором тла рядка

— бортунак
джерело

0

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

Ура! :)

— Лучан
джерело

Ви маєте на увазі використання http://www.w3.org/TR/html4/strict.dtdStrict? реф. w3.org/QA/2002/04/valid-dtd-list.html Так чи інакше, це не варіант, оскільки зміна ДОКТОМУ зараз, ймовірно, вплине на візуалізацію багатьох інших веб-сторінок.

— Марко Демайо,

0

За допомогою деякого 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;
}

— АнтонійВО
джерело

0

Я вирішив проблему, застосувавши box-sizing:border-box; до самих комірок таблиці, окрім того, щоб зробити те ж саме з входом та обгорткою.

— Ванко
джерело

0

Я вирішив проблему, скориставшись цим

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

— Кевін Мухват
джерело

-1

Зазвичай я встановлюю ширину моїх даних на 99%, щоб виправити це:

input {
    width: 99%;
}

Ви також можете видалити стилі за замовчуванням, але це зробить менш очевидним, що це текстове поле. Однак я все одно покажу код для цього:

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

Ad @ m

— кирб
джерело

-2

Проблема полягає у border-widthвхідному елементі. Незабаром спробуйте встановити margin-leftвхідний елемент на -2px.

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

— бурек пекаричний
джерело

не думай так. що просто зміщує поле вліво і знищує лівий край

— куб. молодих