html - 选择和按钮元素弄乱了表格

Question

我有一张 table ，里面有一个 select 和一个 button 元素。我已将 select 设置为占据所有宽度并且它有效。但是现在单元格不占用 50:50 空间——相反，第二个 td 总是更小。 只有当我在表中选择元素时才会发生这种情况，否则不会。 此外，按钮不想拉伸(stretch)并占据所有宽度。为什么？ - 我们找到了这个问题的答案，但不是第一部分。

代码:

<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

你想拉伸(stretch)按钮吗？为什么你不使用这个:

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