動態擴展下拉菜單

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樣式按照上面的鏈接