HTML table row extending based on second row

Question

I have 2 rows in a HTML table. The first column in the first row spans based on the second column(This is Volvo This is Volvo) in the second row.

I want both the rows spanning independently based on the default value/size.

https://jsfiddle.net/p457mcdx/

HTML code:

<table>
<tr>
  <td>
  <input type="text" placeholder='firstname'>
  </td>
    <td>
  <input type="text" placeholder='Lastname'>
  </td>
</tr>
<tr>
  <td>
  <select>
  <option value="volvo">This is a Volvo This is a Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
  </td>
</tr>

</table>

The very simplest way that comes to mind is to simply have two separate tables. — Pekka, Mar 04 '16 at 15:47
Would colspan on the second row work for you? If you're only going to have a single element in the second row, maybe that's the simplest solution? — PWL, Mar 04 '16 at 15:49
You can find solution to your problem in the link provided below. Its the same scenario. Thanks http://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width — Muhammad Umar, Mar 04 '16 at 16:10

Luca De Nardi · Answer 1 · 2016-03-04T16:01:35.243

0

You can set a width on the select trough CSS

select{
  max-width: 100px; /* or width: 100px */
}

So that it doesn't span table columns.

EDIT: Example

edited Mar 04 '16 at 16:01

answered Mar 04 '16 at 15:53

Luca De Nardi

2,280
16
35

score 0 · Answer 2 · answered Mar 04 '16 at 16:01

I'm not sure if you want this:

<table>
  <tr>
    <td>
      <input type="text" placeholder='firstname'>
    </td>
    <td>
      <input type="text" placeholder='Lastname'>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <select style="width:100%">
        <option value="volvo">This is a Volvo This is a Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
  </tr>
</table>

If you don't want your select with 100% width, just remove the style attribute

HTML table row extending based on second row

2 Answers2