使select2框足夠容納內容

Question

我在jsfiddle中有這張桌子 。 我希望name列足夠寬以適合options可用的名稱而不會被截斷。

我已經探究了Select2外觀文檔中的建議，但這些建議似乎沒有提供我所需要的。

如果可能的話，我希望它自動縮小或擴大以適合data最長的可用文本。

<table>
<tr><td>name</td><td>sex</td><td>age</td></tr>
<tr><td><select class="name" multiple="multiple"><option></option></select><td><input name="sex"/></td><td><input name=
"age"/></td></tr>
<tr><td><select class="name"/><td><input name="sex"/></td><td><input name=
"age"/></td></tr>
</table>

<script>
var options = [
  {id: 1, text: 'Alexander Allen Abrahms III'},
  {id: 2, text: 'Benjamin Barry Bautista Jr.'}
]



$(".name").select2({data:options, placeholder: 'Full name'});
</script>

Answer 1

您可以使用css並在select標簽上定義樣式，如下所示：

<select class="name" style="width:100%" multiple="multiple">
   <option></option>
</select>

並定義表格單元格寬度：

<table>
   <thead>
     <tr>
       <th width=50%> Name </th>
       <th width=25%> Sex </th>
       <th width=20%> Age </th> 
    </tr>
   </thead>
   <tbody> Your table body</tbody>
</table>

這是您在小提琴中編輯的代碼https://jsfiddle.net/3hrdrjj4/1/

編輯：

帶有選擇寬度的小提琴，可響應所選擇的選項並固定占位符https://jsfiddle.net/3hrdrjj4/5/

Answer 2

如果我沒有理解錯ü想這對嗎？

您只需添加style="width: 250px;" 到您想要的輸入。 或添加width: 250px; 到name類。

https://jsfiddle.net/wLzxo9ba/5/

Answer 3

解決該問題的另一種方法是：

<table style="width:100%">
    <tr>
        <td style="width:50%">name</td>
        <td style="width:15%">sex</td>
        <td style="width:15%">age</td>
    </tr>
    <tr>
        <td style="width:50%"><select class="name" multiple="multiple" style="width:100%"><option></option></select>
        <td style="width:15%"><input name="sex"/></td>
        <td style="width:15%"><input name="age"/></td>
    </tr>
    <tr>
        <td style="width:50%"><select class="name"  style="width:100%"/>
        <td style="width:15%"><input name="sex"/></td>
        <td style="width:15%"><input name="age"/></td>
    </tr>
</table>