bootstrap d-flex中的Jquery Datatable在Internet Explorer中溢出父级

Posted 2023-05-08

【中文标题】bootstrap d-flex中的Jquery Datatable在Internet Explorer中溢出父级

【英文标题】：Jquery Datatable inside bootstrap d-flex is overflowing parent in internet explorer

【发布时间】：2017-12-16 01:04:43

【问题描述】：

Datatable 仅在 Internet Explorer 中使用 d-flex 类呈现外部或从父级溢出。

<div class="d-flex justify-content-center">
    <div class="card">
        <div class="card-header">HEADER</div>
        <div class="card-block">
          JQUERY DATATABLE
        </div>
    </div>
</div>

这里是这个问题的 JSFiddle https://jsfiddle.net/q9L2L6dz/

【参考方案1】：

这是一个已报告的问题，您可以查看here。

解决它的一种方法是为您的行设置固定宽度。更改此行：

<div class="row" style="padding-top:5px; padding-bottom:15px;">

到：

<div class="row" style="padding-top:5px; padding-bottom:15px;width: 900px;">

当然，您需要使用媒体查询而不是像 900px 这样的静态值。

您更新的fiddle