寬度爲100％的HTML輸入文本框溢出表格單元格

有誰知道爲什麼寬度爲100％的輸入元素會遍歷表格的單元格邊界。寬度爲100％的HTML輸入文本框溢出表格單元格

在下面輸入框的簡單示例中，查看錶格的單元格邊框，結果非常糟糕。這已經過測試，它的發生方式與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>

來源

2010-03-03 Marco Demaio

我解決了這個問題如果你只是使用表格來表示輸入，你可能會在'ul'或'ol'內切換到使用'form'，'label'和'input'。這至少稍微有點語義。當然，即使你堅持使用'table'，你也應該使用'form'。 – 2010-03-03 16:38:46

191

你可以使用CSS3 box-sizing特性包括外部填充和邊界：

3210

來源

2011-11-30 14:21:26 pricco

很遺憾，但不幸的是，IE 7並沒有正確處理盒子大小。在IE 7中試試以下... http：//www.css3。info/preview/box-sizing /或者查看http://css-tricks.com/box-sizing/ – AnthonyVO 2012-05-22 17:07:04

有同樣的問題，發現這個gem – Steoates 2013-01-23 16:05:21

@AnthonyVO：true，IE7的唯一解決方法是添加特定的CSS它使用IE條件註釋'<！ - [if lt IE 8]>'和input [type =「text」] {width：95％}' – 2014-02-05 11:47:03

寬度值不考慮邊框或填充：

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

您在每側得到填充的2px的，再加上每邊邊框1px的。
100％+ 2 *（2px + 1px）= 100％+ 6px，這比父td擁有的100％子內容多。

您的選擇：

任何設置box-sizing: border-box;按@pricco's answer;
或使用0邊距和填充（避免額外的大小）。

來源

2010-03-03 12:33:54 ANeves

更進一步的高級答案你可以設置填充和邊框爲0像素，然後100％應該工作。 – Mauro 2010-03-03 16:37:15

確實，即使沒有爲td設置任何填充 - 非常好。 – ANeves 2010-03-03 16:41:39

此外，如果填充產生了問題，可以使用'text-indent'來模擬文本前端的填充，以及垂直填充的'line-height'（儘管保留垂直填充不會影響反正寬度）。 – 2010-03-03 16:58:31

-2

問題在於輸入元素的border-width。不久，嘗試將輸入元素的margin-left設置爲-2px。

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

來源

2010-09-09 09:11:23

不這麼認爲。這只是轉移盒的左側和破壞左旁 – 2012-01-13 04:42:27

-4

我有完全相同的問題，解決這樣說：

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

來源

2011-06-01 12:06:02 pasx

我的錢，這再加上在該領域爲中心的輸入是去 – 2012-09-17 06:49:07

的問題已被前面所解釋的，所以我將只重申：寬度不考慮邊框和填充。一個可能的答案沒有討論，但我發現幫助我出了一堆是包裝你的輸入。下面的代碼，我會解釋如何幫助在第二：

<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：因爲我剛剛得到一個隨機downvote，我想說的是一個更好的方式來處理溢出是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已知問題）。

來源

2011-06-19 00:03:52

的簡短的筆記最好的辦法：用'溢出：隱藏;'內容仍然是「捅破通過'以完全相同的方式到達盒子的外部，但它被截斷而不是被顯示 - 因此它不會與其他內容重疊。 – ANeves 2012-01-25 16:10:24

-1

我平時的我的輸入設置寬度爲99％，解決這個問題：

input { 
    width: 99%; 
}

您也可以刪除默認的樣式，但會使其不太明顯，這是一個文本框。不過，我會針對反正代碼：

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

廣告@米

來源

2011-06-19 00:09:52 kirb

的東西像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的邊距（這使得它比td小3px），內部有3px的填充。這使得輸入6px比td小，這就是你想要開始的。

我不確定這個機制，但它的工作原理。

在這個簡單的例子中，它也適用於右邊距爲6的單個div。但是，在我的web應用程序中，只有上述解決方案有效。

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

來源

2011-07-02 09:33:17 Andreas

從DOCTYPE聲明中取出「http://www.w3.org/TR/html4/loose.dtd」，它解決了您的問題。

乾杯！ :)

來源

2011-07-25 14:33:43 Lucian

你的意思是使用'http：// www.w3.org/TR/html4/strict.dtd'嚴格？ REF。 http://www.w3.org/QA/2002/04/valid-dtd-list.html無論如何，這不是一個選項，因爲現在更改DOCTYPE可能會影響網頁中許多其他stuf的呈現。 – 2011-07-25 18:09:18

問題是由於輸入元素框模型。我最近在嘗試將移動設備的輸入保持在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％。你有你的輸入很好地填充邊界等，但沒有惱人的溢出！

來源

2011-11-17 11:53:37 hallodom

我解決了這個問題，開始用@ hallodom的答案。我所有的輸入都包含在li的內部，所以我所要做的就是設置li overflow：隱藏它來消除多餘的輸入溢出。

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

.ie7 input { 
    width:100%; 
}

來源

2012-02-17 16:06:48 chet

使用一些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; 
}

來源

2012-05-22 15:08:55 AnthonyVO

我知道這個問題是3歲，但問題仍然存在，目前的瀏覽器和人們仍然來到這裏。現在的解決方案是calc()：

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

它是由大多數現代瀏覽器支持。

來源

2013-10-02 15:14:27 trojan

我通過應用box-sizing:border-box解決了這個問題;到表格單元格本身，除了對輸入和包裝器做同樣的處理。

來源

2014-10-15 20:07:38 Vanco

，而不是這個利潤率鬥爭只是做

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

這樣的單元格邊框是可見的，可以控制行背景顏色

來源

2015-09-19 03:21:28 bortunac

我用這個

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

來源

2017-06-12 21:47:56

寬度爲100％的HTML輸入文本框溢出表格單元格

回答

相關問題