Html 宽度为 100% 的文本输入稍微超出包含 table 单元格的末尾

Question

相当简单的问题；我有一个 table，其中包含 HTML 中的表单输入，并已将其中一个元素设置为跨越 table 宽度的 100%。但是，它似乎略微超出了它包含在以下单元格的末尾：

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

.queryinput {
    width:100%;
}

它在 jsfiddle 中几乎看不出来，但在我的页面上它很大 table 跨越了大约 80% 的屏幕，因此看起来非常凌乱。任何帮助将不胜感激。

Answer 1

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

td {
    overflow: hidden;
}

Answer 2

您可以使用 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;
}