Bootstrap - 表内模态表内表答案

【问题标题】：Bootstrap - Table Within Modal Within TableBootstrap - 表内模态表内表
【发布时间】：2017-08-18 18:16:45
【问题描述】：

我在使用带有 Bootstrap 的 Django 时遇到了模式窗口问题。我有一张表格，其中有一列，其中单元格是到模态窗口的链接。然后，模式窗口应该显示另一个与您选择的单元格相关的表格。

问题是我试图将模态 div 保留在 for 循环中，因为这就是我确定单击表格的哪一行的方式。我已经阅读了一些关于模态的内容，并且看到其他人在他们的模态 div 位于表格标签内时遇到问题，所以我认为这可能是我的问题所在。

目前，当我按预期单击单元格时，主表正确显示并且模式窗口打开。它正确地从 for 循环中获取信息。

但是，当我在模态 div 中放置一个表格时，它不会显示在模态窗口中，而是在主表格下方显示模态是否已被激活。然后，模式窗口仅显示带有空正文的页眉和页脚。如果我摆脱模态中的表格并使用类似 p 的东西，它可以工作，但我更喜欢使用表格。

如果我将模态 div 移到它所在的位置之外，那么它可以与模态窗口中的表格一起使用，但问题是我需要在 for 循环中使用它，因为这样我就知道点击了表格的哪一行。

谁能告诉我是否有比我正在做的更好的方法来做这件事，比如如果可能的话，根据选择的行传递一个变量，或者是否有办法将模态 div 保持在原处并且仍然在模态窗口中显示表格？

HTML 如下。

<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>

【问题讨论】：

标签： django twitter-bootstrap

【解决方案1】：

为了将来参考，我使用下面的代码作为<table> 标记的替代品来实现这一点。

<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>

【讨论】：