输入文本框和宽度100％(Input text box and width 100%)

我正在写一个简单的形式对一些数据发送到数据库。

我用它在我自己的公司，所以我并不需要有一个完美的风格。

我使用的是表的布局（这是正常在此应用）。

<table width="500px" style="border:1px solid black; overflow:hidden">
    <tr>
     <td>Born <input type="text" name="nato_pf" /></td>
    </tr>
</table>

我想设置输入文本到100％（至该行的末端）的宽度，但是，如果我这样做，输入文本换行到一个新行。

我发现只有采用div的解决方案，他们不适合我的那一刻。

编辑：有时候，我不得不在同一条线上两个输入（具有不同大小），所以我觉得我不能添加其他td标签。

Answer 1:

http://jsfiddle.net/gmmr7/1

table {
    border:1px solid black;
    width: 200px;
}

.left {
    float: left;
}

.left2 {
    overflow: hidden;
    padding: 0 4px;
}

.left2>input {
    width: 100%
}

<table>
    <tr>
        <td>
            <label class="left">Born</label>
            <div class="left2">
                <input type="text" name="nato_pf" />
            </div>
        </td>
    </tr>
</table>

Answer 2:

<table width="500px" style="border: 1px solid black; verflow: hidden">
    <tr>
        <td style="width: 50px;">
            Born
        </td>
        <td>
            <input type="text" name="nato_pf" style="width: 99%;" />
        </td>
    </tr>
</table>

宽度的99％，因为100％的文本框越过表格边框:)，也给一个宽度与首个TD）

的jsfiddle http://jsfiddle.net/2yZmB/

Answer 3:

你可以定义另一个TD元素

<table width="500px" style="border:1px solid black; overflow:hidden">
    <tr>
        <td>Born </td><td><input type="text" name="nato_pf" /></td>
    </tr>
</table>

CSS