动态扩展下拉菜单

Question

我有一个有不同长度（宽度）的多个下拉菜单的表格。
我想较短的下拉菜单具有相同的宽度为较长的：

一个快速的解决方案是：

.mySel { 
    width: 35%; 
} 

但是，当然，这不是动态的。

有没有办法动态地定义较短的下拉菜单的宽度，以便它扩展到整个表格单元格？
也许用jQuery？

Here is a fiddle。

Answer 1

可以实现，使用柔性盒这样

.flx{ 
 
    display:flex; 
 
} 
 

 
.flx select { 
 
    flex-grow: 1; 
 
}

<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Some Text</td> 
 
     <td> 
 
     <div class="flx"> 
 
     
 
    
 
     From: 
 
     <select id="mySel1"> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     To: 
 
     <select id="mySel2"> 
 
      <option>11</option> 
 
      <option>12</option> 
 
      <option>13</option> 
 
     </select> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>More Text</td> 
 
     <td> 
 
     <select> 
 
      <option>Option 4</option> 
 
      <option>Option 5</option> 
 
      <option>Option 3</option> 
 
     </select> 
 
     <select> 
 
      <option>A very loooong option</option> 
 
      <option>Option 5</option> 
 
      <option>Option 3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

试试这个答案https://stackoverflow.com/a/37601680/7490341 我的建议是保持独立<td>每个下拉和css样式按照上面的链接