CODEWITHSUNDEEP
htmlcss
Anwar
Anwar

Reputation: 4246

how to make an element fill the table row

I have an element <select> </select> with some <option> </option> in a table row. I want this select to fill all the row space cause some other <input type = "text"> make the row larger than the initial <select> width.

Here is my code to show you the space gap :

<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

If you copy this code you will clearly see the difference between this element. How can I do to make them at the same width please ?

Upvotes: 1

Views: 585

Answers (4)

Florin Pop
Florin Pop

Reputation: 5135

You also can set the element width in css like this:

input, select {
    width : 100px;
}

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46775

In the simplest case, add a width to the select element:

td {
  border: 1px dotted blue;
  }
select {
  width: 100%;
  }
<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

Just add width: 100% to select element:

table tr td select{
    width: 100%;
}
<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

Upvotes: 2

T J
T J

Reputation: 43156

Just set the width of <select> to 100% as follows:

*{
  margin:0;
  padding:0;
}
select{
 width:100%;
}
<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

Upvotes: 0

Related Questions