Skip to content Skip to sidebar Skip to footer

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 i

Solution 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>

Solution 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/


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

}

Post a Comment for "Input Text Box And Width 100%"