Javascript 引导模式中的jQuery数据表溢出

我有一张桌子在引导模式里面。我在dataTable单元格中填充的内容非常大，它没有将文本包装以适应模式中的表格，而是溢出了模式，就像它无法拾取模式宽度并包装文本一样

屏幕截图：

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

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');
    }
});
}

我尝试过各种解决方案，例如指定wrap 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>

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');
    }
});
}

&时代；
问题
代码
标题
指示
摘录
class=“文本中心”>激活
编辑

代码提取2（数据表填充）：

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

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');
    }
});
}

函数显示问题（测验id）
{
$（'questions\u quick\u id'）.val（'quick\u id'）；
window.questionsTable.fnClearTable（）；
$.post（{{url（“getGameQuestions”）}}，{quick\u id:quick\u id}）
.完成（功能（数据）
{
if（typeof（data.error）！=“未定义”）
{
$（'#error msg'）.html（data.error）；
$（“#页面错误”）.fadeIn（300）、delay（2000）、fadeOut（500）；
}
其他的
{
for（数据中的var d）
{
var问题=数据[d]；
var active=（question.active==未定义的| | question.active==false）？“非活动”：“活动”；
var ai=window.questionsTable.fnAddData([
问题代码，
问题.标题，
问题.指示，
问题.摘录，
活跃的，
''
]);
var oSettings=window.questionsTable.fnSettings（）；
var addedRow=oSettings.aoData[ai[0]].nTr；
第（2）项.setAttribute（'width'，'29%'）；
addedRow.cells.item（4）.className=“文本中心”；
addedRow.cells.item（4）.className=“文本中心”；
addedRow.cells.item（5）.className=“文本中心”；
}
$（'questionsModal'）.model（'show'）；
}
});
}

尝试删除

这可能会导致模式中的响应宽度失败

您还可以尝试在表中指定最大宽度

这可能与Bootstrap 2.3.2有点关系，尽管这是Bootstrap 2.3.2的一个问题，看起来您正在使用Bootstrap 3

移除

并检查。

---

我也遇到过同样的问题，在我删除div之后，我完全得到了它。

这个问题是在这里提出的

我建议您启用Datatables响应扩展，放弃包装器，改用这段代码

//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();

        });

反馈
票号
创建日期
分类
话题

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

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

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

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

.....

---

我希望这有帮助

在尝试了这么多解决方案后，我找到了一个适合我的解决方案

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

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

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

.....

---

我希望这有帮助

像这样初始化数据表

---

打开模式时初始化datatable。第一次打开模式时i==1秒thime i==2，因此datatble无法再次重新斜体化，并且不会发出任何类似datatable已初始化的警报框

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

---

只需使用“table responsive”类将表插入div中：

//你的桌子在这儿吗

@Adosi:它已经在y上滚动了，但这不是预期的效果，Magnanity希望它包装表格内容。试试上面的容器类。非常好！但是，在我打开

scrollX

选项之前，这对我来说并不起作用。另外，我只使用了

.columns.adjust（）这可能是问题bt的一个解决方案。如果您解释了为什么它是一个解决方案以及它是如何工作的，那么这将是一个更好的答案。在打开模式时初始化datatable。第一次打开模式时，i==1秒时间i==2，因此datatble不能一次又一次地重新注资，并且不会给出任何类似datatable已经初始化的警报框