CODEWITHSUNDEEP
htmlcss
Alec Cutler
Alec Cutler

Reputation: 55

how do I make button, input fill entire table cell? slight gaps are left

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

Upvotes: 0

Views: 1216

Answers (2)

Steve
Steve

Reputation: 1376

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

Upvotes: 1

Toan Lu
Toan Lu

Reputation: 1239

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

Upvotes: 1

Related Questions