在表格中添加寬度時選擇寬度變化？

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

您設置width到100%。它位於表格內，表格將根據其內容大小進行調整。如果你想要它是一個確切的大小，你必須指定你想要的大小。如果您希望它是其父項的100％，那麼您必須使用父級，它是一個具有寬度設置的div。表格元素是靈活的，並且是你得到這種行爲的原因。

如果您想要響應行爲，通常可以使用響應單位而不是表或百分比。 em是一個常見的響應單元。 Here's more info on this unit from css-tricks.您也可以使用vw或幾個其他單位相對於屏幕大小，但不是它的父元素