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

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

IMG

Код:

<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>
Источник

2 ответа

Решение

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

<button style="width: 100%;" type="btn_nova_igra" onclick="novaIgra()">Nova igra</button>
Источник

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

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

Это фактически заставит каждый столбец быть вдвое меньше ширины всей таблицы.

Источник
Другие вопросы по тегам