テーブルの内側に追加すると幅が変わるのですか？

Question

CSSで選択幅を初期化しました。オプションを追加すると幅が変更されます。幅の変化を避けるには？

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
    $("select").append("<option>example.example.example</option>"); 
 
    }); 
 
});

select { width:100%; } 
 
table { width:100%; } 
 
div { width:200px; height:50px; background-color:grey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<table> 
 
    <tr><td>Label</td> 
 
     <td><select> 
 
      <option>Select</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</div> 
 
<button>Click</button>

Answer 1

あなたは100%にwidthを設定します。それはテーブルの中にあり、テーブルはその内容のサイズに合わせて調整されます。正確なサイズにしたい場合は、どのサイズにするかを指定する必要があります。親の100％にしたい場合は、幅を設定したdivである親を使う必要があります。表の要素は柔軟性があり、なぜこの動作を得ているのですか？

レスポンシブ動作を行う場合は、通常、テーブルまたはパーセントの代わりに応答単位を使用できます。 emは一般的な応答単位です。 Here's more info on this unit from css-tricks.vwまたは画面サイズに相対的な他のいくつかの単位を使用することもできますが、親要素には適用されません。