Bootstrap - Table Within Modal Within Table

Question

I'm using Django with Bootstrap and have a problem with a modal window. I have a table and within that I have one column where the cell is a link to the modal window. The modal window should then display another table relevant to the cell you selected.

The problem is I'm trying to keep the modal div inside of a for loop because that's how I am determining which row of the table has been clicked. I've read a little on modals and seen other people have a problem when their modal div was inside table tags, so I think that's where my issue might be coming from.

At the moment, the main table displays properly and the modal window opens when i click on the cell as intended. It takes the information from the for loop properly.

However, when I put a table within the modal div it doesn't display in the modal window, it displays underneath the main table whether the modal has been activated or not. The modal window then only displays the header and footer with an empty body. If I get rid of the table inside the modal and use something like p's instead it works but I would prefer to use the table.

If I move the modal div outside of where it is then it works with the table in the modal window, but the problem is I need it within the for loop because that's how I know which row of the table has been clicked.

Can anyone tell me if there is a better way of doing this than what I am doing, like passing a variable based on which row has been picked if possible, or if there is a way to keep the modal div where it is and still display the table in the modal window?

The HTML is below.

<table class="weekly table-hover main-manager-display" style="text-align: center; width: 100%">
    <thead>
    </thead>
    <tbody style="color: white">
        {% for week in team_selection %}
            <tr>
                {% for item in week|slice:":10" %}
                    <td>{{ item }}</td>
                {% endfor %}
                <td><a data-toggle="modal" href="#maxModal" style="color: white">{{ week.10 }}</a></td>
                <td>{{ week.11 }}</td>
            </tr>
            <div class="modal fade" id="maxModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content" style="background-color: #c4dfe6">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" style="text-align: center; color: #1c4d66">Week {{ week.0 }} Best Possible Team</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table modal-table">
                                <thead>
                                    <tr>
                                        <th>Position</th>
                                        <th>Player</th>
                                        <th>Points</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Test1</td>
                                        <td>Test2</td>
                                        <td>Test3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn" data-dismiss="modal" style="background-color: #c4dfe6; color: #1c4d66">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </tbody>
</table>

Answer 1

For future reference, I got this to work by using the code below as an alternative to the <table> tag.

<style>
.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
</style

<div class="modal-body">
    <div class="table">
        <div class="row">
            <div class="cell"></div>
        </div>
    </div>
</div>