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