選択とボタンの要素がテーブルを台無しにします

Question

私はテーブルがあり、内部にはが選択されていますと1つのボタン要素があります。私はすべての幅を取る選択を設定し、それは動作します。しかし、今では、細胞は50:50のスペースを取らず、代わりに2番目のtdは常に小さくなります。 これは、テーブルに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列に幅を設定することにより、適切にサイズに各列を強制することができ

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

Answer 2

：

あなたはこれを使用しない理由

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

これは効果的にテーブル全体の幅の半分のサイズになるように各列を強制します。