如何制作按钮，输入填充整个表格单元格？ 留下微小的缝隙

Question

I am trying to fill an entire table cell with a button and another cell with a drop-down list.

If you have a look at my JSFiddle, I am having troubles with a slight gap between the cells and the table border.

I have tried several different approaches but I can't seem to figure out how to remove the gap.

Any help with this would be appreciated. Thank you!

input, select {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

JSFiddle

Answer 1

If you mean the big spaces above and below the input and select box then you can solve this by adding height:auto to tr tag instead of height: 100px .

If you mean that you want the input and select to touch the border then you can add padding: 0px to td tag.

JSFiddle

Answer 2

Your padding:0 need to be on td, not tr, so

td {
    padding: 0;
}

and with the button, the browser builds in a space for styling, so if you want it to be full you can do:

input[type=button]{ 
    border: solid 1px #ccc;
}

you will lose the 3d effect on the button though