Foundation 5 Dropdown Menu Misalign in scrollable table row

I would like to add a dropdown button inside a scrollable table row. I am able to get the dropdown working inside a scrollable table row. However, when you scroll inside the table row, the dropdown menu will misalign.

Here are some screenshots to elaborate.

1. Initial state, when Dropdown Button 1 is clicked.

2. When you scroll the page outside of the table, it works fine.

3. When you scroll the page inside the table row, the dropdown menu misalign.

Please refer to this example in jsbin: http://ift.tt/1CoGuDX

Click on the Dropdown Button 1, dropdown menu will show up.

• Try scrolling inside the table row and you will see that the dropdown menu will misalign.
• But, when you scroll outside of the table, it will work fine.

Any help and suggestion to solve this issue is much appreciated. Thanks a lot. :)