Question

我在bootstrap模式中有一个表。我在dataTable单元格中填充的内容非常大，而不是包装文本以适应模态中的表格，它会溢出模态，就像它无法获取模态宽度并包装文本一样。

截图：

enter image description here

我尝试了各种解决方案，例如指定包装CSS以及指定表格宽度（以％和px为单位）和在表格上设置width属性（以％和px为单位），但表格绝对没有变化。任何关于如何纠正这个问题的建议将不胜感激。

代码提取1（模态）：

<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Questions</h4>
        </div>
        <div class="modal-body">
            <div class="row">
            <div class="responsive-table">
                <table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
                    <thead>
                        <tr>
                            <th >Code</th>
                            <th>Title</th>
                            <th>Instruction</th>
                            <th>Extract</th>
                            <th>class="text-center">Active</th>
                            <th class="text-center">Edit</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

代码提取2（dataTable人口）：

function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
    if (typeof(data.error) != 'undefined')
    {
        $('#error-msg').html(data.error);
        $('#page-error').fadeIn(300).delay(2000).fadeOut(500);
    }
    else
    {
        for(var d in data)
        {
            var question = data[d]; 
            var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";

            var ai = window.questionsTable.fnAddData([
                question.code,
                question.title,
                question.instruction,
                question.extract,
                active,
                '<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
            ]);
            var oSettings = window.questionsTable.fnSettings();
            var addedRow = oSettings.aoData[ai[0]].nTr;
            addedRow.cells.item(2).setAttribute('width','29%');
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(5).className = "text-center";
        }
        $('#questionsModal').modal('show');
    }
});
}

Answer 1

尝试删除

<div class="responsive-table">它可能导致模态中的响应宽度失败。

您还可以尝试在表格上指定最大宽度。

虽然Bootstrap 2.3.2存在问题但看起来你使用的是3，但这可能略有关联。

<强> http://www.bootply.com/88364

Answer 2

这里提出这个问题 datatables does not becomes responsive on bootstrap3 modal dialog

我建议你启用Datatables Responsive扩展，放弃包装并改用代码片段。

//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
           //Get the datatable which has previously been initialized
            var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
            //recalculate the dimensions
            dataTable.columns.adjust().responsive.recalc();

        });

Answer 3

在尝试了这么多解决方案后，我找到了一个为我工作的人！

只需将表放在div中并在代码中定义CSS。

<div style="overflow:auto;">
<table>
      .....
</table>
</div>

我希望这有帮助！

Answer 4

删除<div class="row">并检查。我也遇到了同样的问题，在我删除了div后，我完全理解了它。

Answer 5

在尝试了这么多解决方案后，我找到了解决方案。

只需将表放在div中并在代码中定义CSS。

<div style="overflow:auto;">
<table>
      .....
</table>
</div>

我希望这有帮助！

Answer 6

<div class="modal-body">
    <div class="row table-responsive">
        <div class="col-sm-12">
            <table id="example" class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th class="site_name">
                            Feedback
                        </th>
                        <th>
                            Ticket Id
                        </th>
                        <th>
                            Date of Creation
                        </th>
                        <th>
                            Classification
                        </th>
                        <th>
                            Topic
                        </th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Answer 7

像这样初始化数据表当我们打开模态时初始化数据表。第一次打开模态时我= = 1秒thime i == 2所以datatble不能再次重新启动不再给出像datatable已经初始化的任何警告框

var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
     var oTable=$('#questionsTable').DataTable();
 }
 i++;
});

jQuery dataTable在bootstrap模式中溢出

7 个答案: