100% width and width INPUT I / O field inside TD problem in Chrome

Question

I found an almost identical case with mine here . But the accepted answer does not work for me, so I hope that everything is in order, that I am asking a new question.

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

My problem is that I cannot do this in Chrome using a snippet of code. thanks in advance

UPDATE: my problem in Chrome is explained: If you look closely, there are 1 or 2px indents on the upper and lower borders. This is me in Chrome version 47.0.2526.111 m in Windows 7 (please open in new windows to see clearer ones)

UPDATE2: Big mistake on the sample. DIVs adapt the parent just fine without using box size. I really want INPUT to adapt its parent. Just updated the 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

I am really looking for an answer to this question for quite some time (since 2014). Lying on the Internet, some posts say this is a Chromium bug. I managed to remember the link here . However, I doubt that there will be an answer soon.

Meanwhile, I would like to offer a quick and dirty fix for those who are in the same problem as me: for chrome, wrap all the INPUTs inside the 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> 

Answer 2

This is strange, but I think that what you see is a td with a fixed height of 100 pixels and a border width of 1px above and below, discarding a detailed calculation of <100> 100%.

Is it possible to assign div height instead of td , as shown 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 3

why not use simple css layouts instead of doing drag and drop using 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>