宽度为100％的HTML文本输入稍微超出了包含表格单元格的结尾

Question

相当简单的问题； 我有一个包含HTML表单输入的表，并将其中一个元素设置为跨越表宽度的100％。 但是，它似乎稍微超出了它所包含的单元格的末端：

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

.queryinput {
    width:100%;
}

它在jsfiddle中几乎不引人注意，但在我的页面上，它是一张大桌子，占据了屏幕的80％左右，因此看起来非常凌乱。 任何帮助将不胜感激。

Answer 1

您可以使用box-sizing属性（CSS3）来考虑填充和边框。 在这里查看结果。 在此处查看浏览器支持。

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

Answer 2

尝试在css中的td元素中添加overflow:hidden ：

td {
    overflow: hidden;
}