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

Question

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

我在jsfiddle中做了一个例子。 第一个表是我得到的输入。 第二个是我希望输入看起来像。

说清楚。表1应如表2所示。

JSfiddle

<table border="1">
<tr>
    <td>Column 1</td><td>Second Column</td><td>3rd Column</td>
</tr>
<tr>
    <td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td>
</tr>
<tr>
    <td>Some database content</td><td>more db content</td><td>more content</td>
</tr>
</table>

<br>
<br>

<table border="1">
<tr>
    <td>Column 1</td><td>Second Column</td><td>3rd Column</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
    <tr>
    <td>Some database content</td><td>more db content</td><td>more content</td>
</tr>
</table>

Answer 1

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

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

Working fiddle

修改

以上内容在Chrome中无效。结合@Johan Perez的答案解决了我的想法。

CSS：

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

New working fiddle（在FF，Chrome，IE11中测试）

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

你能发帖看看你的问题吗？

Answer 2

使用宽度：100％使用box-sizing：border-box。一个例子：

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

Answer 3

试试这个css：

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

Updated Fiddle