Issue with X-editable when used with Footable compact view

Question

I hope that somebody can help. I've got an issue whereby I've got an x-editable link on a footable which works when used on a desktop browser, but not on a mobile device. This can be replicated by simply reducing the width of the browser, as footable hides columns and gives the option to expand downwards to see the hidden columns.

I have created a JSFiddle here: fiddle

Specifically the issue is that even though the link is present in the expanded compact view, no amount of clicking will render the x-editable input for the link. Oddly when I have encountered this issue on my own server, when you go back into full width browsing there are multiple instances of the x-editable input box visible, but I can't replicate this behaviour in the fiddle.

Let me know if you need any clarification!

Thanks in advance.

This is the code:

 <table class="footable table">
    <thead>
        <tr>
            <th data-class="expand">
                Col1
            </th>
            <th>
                Col2
            </th>
            <th data-hide="phone,tablet">
                Col3
            </th>
            <th data-hide="phone,tablet">
                Col4
            </th>
            <th data-hide="all" data-ignore="true">
                Id
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="fooNewRecord">
            <td>12345</td>
            <td>done</td>
            <td><a href="#" class="myeditable" id="col3value" data-type="text" data-pk="1" data-url="/post" data-title="UpdateValue">23</a></td>
            <td>20</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

And

 $(function () {
 $('.footable').footable();
 });
 $.fn.editable.defaults.mode = 'inline';
 $('.myeditable').editable();
 $('table').footable();