Question

I have a <table> with many <tr>s. Within one <tr> I want to have two <select> elements. However when I try to do this the <select>s are pushed far apart from each other. I noticed that the gap appears when there are other <tr> elements added within the <table>. (If I had only the <tr> with the two <select> elements, the gap doesn’t exist.) I have two jsFiddles below. One shows what it looks like with the gap, the other without. Any help would be much appreciated!

The jsFiddle showing the gap: http://jsfiddle.net/yMAW5/

The jsFiddle without the gap: http://jsfiddle.net/vyaHJ/

Answer 1

replace your second tr with this

<tr>
        <td class="label"><label>High School:</label></td>
        <td colspan="3">
           <input id="profile_high_school" name="profile[high_school]" size="32" type="text" value="Value" />
        </td>
     </tr>