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

Question

我有一张桌子，里面有一个选择和一个按钮元素。我已经设置了选择以占用所有宽度，它的工作原理。但现在细胞不占用50:50的空间 - 相反，第二个td总是更小。 仅当我在表格中选择元素时才会发生这种情况，否则不会。  此外，该按钮不想拉伸并占据所有宽度。为什么？ - 我们找到了答案，但不是第一部分。

代码：

<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

你想拉伸按钮吗？为什么你不使用它：

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

Answer 2

由于表格已经具有预定义的大小（150px），因此您可以通过显式设置前2列的宽度来强制每个列的大小正确：

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

这将有效地强制每列的大小是整个表宽度的一半。