CODEWITHSUNDEEP
htmlcssformswidth
BGESjack
BGESjack

Reputation: 13

Html text input of width 100% slightly overrunning end of containing table cell

Fairly simple question; I have a table which contains form inputs in HTML and have set one of the elements to span 100% of the width of the table. However, it seems to ever so slightly overrun the end of the cell it is contained in:

https://jsfiddle.net/abz7mtsj/1/

.queryinput {
    width:100%;
}

it is barely noticeable in the jsfiddle but on my page it is a large table spanning about 80% of the screen so looks very untidy. Any help would be greatly appreciated.

Upvotes: 1

Views: 99

Answers (2)

Carl Reid
Carl Reid

Reputation: 780

You can use box-sizing property (CSS3) to account for the padding and border. See the result here. See browser support here.

.queryinput {
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

Upvotes: 2

cakan
cakan

Reputation: 2117

Try adding overflow:hidden to td element in your css:

td {
    overflow: hidden;
}

Upvotes: 0

Related Questions