Input text box and width 100%

问题:

I'm writing a simple form for sending some data to a database.

I use it in my own company so I don't need to have a perfect style.

I am using a table for the layout (this is okay in this application).

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

I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.

I have found solutions only using div and they are not for me at the moment.

EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.

回答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>

回答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% of width because with 100% the textbox goes over the table's border :) and also give a width to the first td ;)

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

回答3:

you can define another td element

<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%;

}