html - Tables cells - make children take full width but not overflow -

html - Tables cells - make children take full width but not overflow -

i'm trying add together kid elements table cell, want children wide can without overflowing. problem not automatically take total width, , if set width 100%, overflow.

i don't want hide overflow, because i'd set borders around children in future. javascript unfavoured solution unmentioned reasons; if works, works.

this test:

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

i've tried few things other people have posted (such making input's display inline-block, making cell width 100%, border-collapse table). i'm using latest firefox browser.

add box-sizing: border-box; input element css.

demo: http://jsfiddle.net/kb9x06cg/

here's great article paul irish gaelic box-sizing: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

and here's mdn's write-up on subject: https://developer.mozilla.org/en-us/docs/web/css/box-sizing

html css