Question

我正在写一个简单的表格，用于将一些数据发送到数据库。

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

我正在使用表格进行布局（在此应用程序中这没关系。）

<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

你可以定义另一个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

input{
    width:99%;

}

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

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>

输入文字框和宽度100％

3 个答案: