动态扩展下拉列表

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>