Элементы выбора и кнопки портят таблицу

Question

У меня есть таблица, и внутри есть один select и один button элемент.Я установил выбор, чтобы занять всю ширину, и это работает.Но теперь клетки не занимают 50:50 места - вместо этого второй тд всегда меньше. Это происходит только тогда, когда у меня есть элемент select в таблице, в противном случае - нет. Кроме того, кнопка не хочет растягиваться и занимать всю ширину.Почему? - Мы нашли ответ на этот вопрос, но не в первой части.

Код:

<table border="1" width="150px">
            <tr><th colspan="2">Tvoje igre</th></tr>
            <tr><td class="row_title" align="right" width="50%">Št. iger:</td><td id="st_iger">0</td></tr>
            <tr><td class="row_title"align="right">Št. zmag:</td><td id="st_zmag">0</td></tr>
            <tr><th colspan="2">Vse igre</th></tr>
            <tr><td class="row_title" align="right">Št. iger:</td><td>0</td></tr>
            <tr><td class="row_title" align="right">Št. zmag:</td><td>0</td></tr>
            <tr><th colspan="2">Nova igra</th></tr>
            <tr><td colspan="2"><select id="dropdown">
                <option>CSS lastnosti</option>
                <option>JavaScript funkcije</option>
            </select></td></tr>
            <tr><td colspan="2"><button type="btn_nova_igra" onclick="novaIgra()">Nova igra</button></td></tr>  
            </table>

Answer 1

Поскольку таблица уже имеет предопределенный размер (150 пикселей), вы можете принудительно настроить размер каждого столбца, явно задав ширину в первых 2 столбцах следующим образом:

 <tr>
      <td width="75px" class="row_title" align="right">Št. iger:</td>
      <td width="75px" id="st_iger">0</td>
 </tr>

.столбец, равный половине ширины всей таблицы.

Answer 2

Вы хотите растянуть кнопку? почему вы не используете это:

<button style="width: 100%;" type="btn_nova_igra" onclick="novaIgra()">Nova igra</button>