表格單元格 - 讓孩子走完整寬度但不會溢出

Question

我正在嘗試將子元素添加到表格單元格，我希望孩子儘可能地寬，不會溢出。我的問題是，他們不會自動佔用全寬，如果我將寬度設置爲100％，它們會溢出。

我不想簡單地隱藏溢出，因爲我想在未來將孩子放在邊界附近。
對於未提及的原因，Javascript是一種不利的解決方案;但如果它有效，它就可以工作。

這是我的測試：

<table style="background:grey;width:500px"> 
    <tr> 
     <td> 
      <input value="Hello World"></input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input style="width:100%" value="Hello World"></input>    
     </td> 
    </tr> 
</table> 

我已經試過了其他人已經張貼了一些東西（如使輸入的顯示直列塊，使單元格寬度100％，邊境崩潰桌子）。我正在使用最新的Firefox瀏覽器。

Answer 1

將box-sizing: border-box;添加到輸入元素CSS。

DEMO：http://jsfiddle.net/kb9x06cg/

下面是從保羅愛爾蘭約盒大小有很大的文章：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

下面是關於這個問題的MDN的寫了起來：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

input領域都因特寬幅填充和邊框。如果您應用box-sizing: border-box，則計算出的寬度將爲100％，而不是100％+填充+邊框。

table { 
 
    background-color: gray; 
 
    width: 500px; 
 
} 
 
table input { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <input value="Hello World"></input> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <input value="Hello World"></input>    
 
     </td> 
 
    </tr> 
 
</table>