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

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 中的输入:

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 中第二 fiddle 的屏幕截图:

你能发布你的问题吗？