Устранение разрыва между выбранными элементами внутри таблицы

Question

У меня есть <table> со многими <tr> с. В пределах одного <tr> я хочу иметь два <select> элемента. Однако, когда я пытаюсь сделать это, <select> s отталкиваются друг от друга. Я заметил, что разрыв появляется, когда в <table> добавляются другие элементы <tr>. (Если бы у меня было только <tr> с двумя элементами <select>, пробел не существует.) У меня есть два jsFiddles ниже. Один показывает, как это выглядит с разрывом, другой без. Любая помощь будет высоко ценится!

jsFiddle, показывающий разрыв: http://jsfiddle.net/yMAW5/

JsFiddle без пробела: http://jsfiddle.net/vyaHJ/

Answer 1

замените свой второй tr этим

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

Answer 2

Это потому, что ширина столбца таблицы наследуется самым широким элементом во всем столбце.