Php 如何使输入宽度适应表格列的宽度

我得到了一个php forloop，它从数据库生成一个表。 第二行有用于搜索的文本输入。 我的问题是，如何使输入宽度适应列

我用jsfiddle做了一个例子。 第一个表是我通过输入得到的。 第二个是我希望输入看起来像什么

说清楚。表1应该类似于表2

第1列第2列第3列
一些数据库内容更多数据库内容更多内容




第1列第2列第3列
123
一些数据库内容更多数据库内容更多内容

使用宽度：100%和框尺寸：边框框。例如：

<input type="text" width="100%" style="box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box;" />

---

将以下样式添加到CSS中的te输入：

width:  100%;
margin: 0;
border:  0px none;

编辑

上面这些在Chrome中不起作用。结合@Johan Perez-answer，我认为可以解决这个问题

CSS:

（在FF、铬、IE11中测试）

编辑2 以下是Chrome中第二把小提琴的屏幕截图：

您可以发布您的用户如何看待问题吗？

尝试以下css：

input[type="text"] {
width: 100%;
border: 0px;
outline: 0px;
}

---

我刚刚添加了特定于导航器的盒子大小。试试看，好的。只在FF中进行了测试。尝试结合@Joan Perez answer？抱歉，我没有可用的Safari测试。它在那里以什么方式不起作用？边界显示了吗？inout太小了，什么？@EL3PHANTEN：我回答中的第二个提琴在Chrome上看起来不错。在Win 8.1上运行最新的Chrome（34.0.1847.116米）你试过第二把小提琴吗（“新工作小提琴”）？在工作小提琴中，第一张桌子看起来不像我想要的第二张。Win 7 chrome版本34.0.1847.116 mI安装了FF，表看起来不一样。也许我应该编辑这个问题，让表1看起来像表2

td input {
    width:  100%;
    margin: 0;
    border:  0px none;
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing: border-box;
}

input[type="text"] {
width: 100%;
border: 0px;
outline: 0px;
}