使select2框宽到足以容纳内容

Question

I have this table in jsfiddle。我希望name列足够宽，以适应options中可用的名称而不会截断。

我已经在Select2 appearance documentation中探讨了这些建议，但这些建议似乎没有提供我所寻求的建议。

如果可能，我希望自动缩小或扩大以适应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

如果我没有弄错，你想要this吗？

您只需将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>