Problem when displaying forms in tables

[Gary McMeekin]

I am trying to display my formset in a table row per form and I believe I am putting the tags in the correct place. However the 'data-formset-body' tag gets moved out of the table in the generated fragment. This results in new forms adding outside the table.

My template looks like this:

 <div id="formset" data-formset-prefix="{{ lineitem_formset.prefix }}">
            {{ lineitem_formset.management_form }}
            <b>ME</b>
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                <div data-formset-body>
                    {% for li_form in lineitem_formset %}
                        {% include "shipments/shipment_entry_lineitem_empty.html" with form=li_form only %}
                    {% endfor %}
                </div>
                </tbody>
            </table>

This fragment is from the initial load, but this seems to be where the problem begins:

<div id="formset" data-formset-prefix="lineitems">
            <input id="id_lineitems-TOTAL_FORMS" name="lineitems-TOTAL_FORMS" type="hidden" value="1"><input id="id_lineitems-INITIAL_FORMS" name="lineitems-INITIAL_FORMS" type="hidden" value="1"><input id="id_lineitems-MIN_NUM_FORMS" name="lineitems-MIN_NUM_FORMS" type="hidden" value="0"><input id="id_lineitems-MAX_NUM_FORMS" name="lineitems-MAX_NUM_FORMS" type="hidden" value="1000">
            <b>ME</b>
            <div data-formset-body="">

                        <!-- Formset template -->
<div data-formset-form="" style="display: block;">
    </div></div><table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
        <td>
            </td>
        <td><input id="id_lineitems-0-product" name="lineitems-0-product" type="text" value="00003-0269-23"></td>
        <td><input id="id_lineitems-0-quantity" name="lineitems-0-quantity" step="0.01" type="number" value="50.00"></td>
        <td><input id="id_lineitems-0-id" name="lineitems-0-id" type="hidden" value="40"></td>
        <td><input id="id_lineitems-0-DELETE" name="lineitems-0-DELETE" type="checkbox">
            <button type="button" data-formset-delete-button="">Delete</button>
        </td>
    </tr>



                </tbody>
            </table>

            <!-- Add a new form -->
            <input type="button" value="Add another" data-formset-add="">
            <script type="form-template" data-formset-empty-form="">

                    <!-- Formset template -->
<div data-formset-form>
    <tr>
        <td>
            </td>
        <td><input id="id_lineitems-__prefix__-product" name="lineitems-__prefix__-product" type="text" /></td>
        <td><input id="id_lineitems-__prefix__-quantity" name="lineitems-__prefix__-quantity" step="0.01" type="number" /></td>
        <td><input id="id_lineitems-__prefix__-id" name="lineitems-__prefix__-id" type="hidden" /></td>
        <td><input id="id_lineitems-__prefix__-DELETE" name="lineitems-__prefix__-DELETE" type="checkbox" />
            <button type="button" data-formset-delete-button>Delete</button>
        </td>
    </tr>
</div>

            </script>

            <script>jQuery(function ($) {
                $("#formset").formset({animateForms: true}).on('formDeleted', function () {
                    console.log("Form deleted", this, arguments);
                }).on('formAdded', function () {
                    console.log("Form added", this, arguments);
                });
            });</script>
        </div>