CSS making tds overlap in a table

Question

I don't understand why td overlaps in my table : http://jsfiddle.net/UEMgb/

table {
    display: inline-table;
    width: 60%;
    border-spacing:0px;
    margin:2%;
}

td {
    padding: 1px;
}

Answer 1

Because you are setting the inputs to a width of 100% and then adding border and padding to it. You could maybe remove the width and set the inputs to display: block; or just add box-sizing: border-box; to the input styles:

http://jsfiddle.net/feeela/UEMgb/1/

Pleaser refer to:

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Answer 2

Your padding .. on

.argument{
  padding: 0px 10px;
}

remove that, and might have to adjust width and border a tiny bit