INPUT box-sizing border-box with 100% height and width inside TD issue in Chrome

Question

I found a nearly identical case to mine here . But the accepted answer does not work for me so I hope it's OK that I make a new question.

The pic below is what I want to achieve in all major browsers (at least IE8+, Firefox and Chrome). INPUTs placed inside TDs fills their parents both width and height.

My issue is that I can't get it done in Chrome with below code snippet. Thanks in advance

UPDATE: My issue on Chrome explained: If you take a closer look, there's 1 or 2px padding at top and bottom border. This is me on Chrome Version 47.0.2526.111 m on Windows 7 (Please open in new windows to see clearer)

UPDATE2: Big mistake on the sample. DIVs adapt their parent just fine without using the box-sizing. What I actually want is the INPUT to adapt their parent as well. Just updated my code snippet again.

 table { border-collapse: collapse; width: 100% } td { height: 100px; border: 1px #ccc solid; } input { border: 1px #ccc solid; height: 100%; width: 100%; box-sizing: border-box; /* works fine with IE8+ */ -moz-box-sizing: border-box; /* works fine Firefox */ -webkit-box-sizing: border-box; /* height is not correct in Chrome */ /*-webkit-box-sizing: content-box; width is not correct in Chrome */ } 

 <table> <tr> <td> <input type="text" value="this INPUT need to adapt to its parent TD"> </td> </tr> </table> 

Answer 1

This is an odd one, but I think what you are seeing is a td with a fixed height of 100px, and border widths on top and bottom of 1px throwing off the child div s height 100% calculation.

Would it be possible to assign the height to the div instead of the td like below? This works for me in chrome.

 table { border-collapse: collapse; width: 100% } td { border: 1px #ccc solid; } div { border: 1px #ccc solid; height: 100px; width: 100%; box-sizing: border-box; /* works fine with IE8+ */ -moz-box-sizing: border-box; /* works fine Firefox */ -webkit-box-sizing: border-box; /* height is not correct in Chrome */ /*-webkit-box-sizing: content-box; width is not correct in Chrome */ } 

 <table> <tr> <td> <div>BOX1</div> </td> <td> <div>BOX2</div> </td> <td> <div>BOX3</div> </td> </tr> </table> 

Answer 2

why not use simple css layouts rather than doing an over kill with tables?

Fiddle

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

.padding {
  height: 100px;
}

.outer_border {
  padding: 1px;
  border: 1px solid black;
}

input {
  border: 1px black solid;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

HTML

 <div class="container">
  <div class="outer_border">
    <div class="padding">
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </div>
  </div>
</div>

Answer 3

I'm actually looking for the answer to this question for quite a time now (since 2014). Lying around the internet are some post say that this is a bug of Chromium. I managed to recall a link here . Nonetheless, I doubt there will be answer soon.

Meanwhile, I would like to propose a quick and dirty fix for anyone who got in the same problem as me: For chrome, wrap all the INPUTs inside a DIV.

 $(function() { // if agent is of Chrome var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); if (isChrome) { $("table td>:input").wrap($("<div>", {"class": "input-container"})); } }); 

 table { border-collapse: collapse; width: 100% } td { height: 100px; border: 1px #ccc solid; } input { border: 1px #ccc solid; height: 100%; width: 100%; box-sizing: border-box; /* works fine with IE8+ */ -moz-box-sizing: border-box; /* works fine Firefox */ /*-webkit-box-sizing: border-box; height is not correct in Chrome *-webkit-box-sizing: content-box; width is not correct in Chrome */ } div.input-container { height: 100%; width: 100%; -webkit-box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="text" value="this INPUT need to adapt to its parent TD"> </td> </tr> </table>