CODEWITHSUNDEEP
htmlcss
DerekConlon
DerekConlon

Reputation: 463

Make input text field full width inside table cell

http://jsfiddle.net/p1my39fh/

table {
    width: 550px;
    border-collapse:collapse;
    margin: auto;
    background-color: #A4A4A4;
    border: 2px solid black;
    padding: 0;
}
table td {
    position: relative;
    text-align: center;
    border: 2px solid green;
    padding: 0;
    margin: 0;
}
<table>
    <tr>
        <td><input type="text" size="30"/></td>
        <td>Test Information</td>
    </tr>
</table>

How can I remove the space around the <input>?

How can I make both <td>s to be the same width?

Upvotes: 11

Views: 72263

Answers (3)

Stickers
Stickers

Reputation: 78676

To make both <td> cells to have same width, you could set:

table {
    width: 550px;
    table-layout: fixed;
}

To have the <input> field to fill the entire width of the <td> cell, you could set:

input {
    width: 100%;
    box-sizing: border-box;
}

Updated demo:

table {
    width: 550px;
    border-collapse:collapse;
    margin: auto;
    background-color: #A4A4A4;
    border: 2px solid black;
    table-layout: fixed;
}
td {
    text-align: center;
    border: 2px solid green;
}
td input {
    width: 100%;
    box-sizing: border-box;
}
<table>
    <tr>
        <td><input type="text" size="30"/></td>
        <td>Test Information</td>
    </tr>
</table>

Upvotes: 23

DerekConlon
DerekConlon

Reputation: 463

The answer was:

why don't you set the width of td to 275px, since you have a fixed width? – jp-jee Jun 11 at 16:43

That comment.

Setting the width to a fixed length worked for me.

Upvotes: 1

Hien Luong
Hien Luong

Reputation: 520

you add width:50%; into table td and expand input width to get rid of space around input

table td input {
 width: 100%;   
}

Upvotes: 10

Related Questions