Question

我最近使用Datatables.net，数据表和引导程序。我想我的问题是：Datatables Responsive Bootstrap用于检测溢出，因为它显然不是父宽度。

这是我的结果： enter image description here

这是一个非常直接的问题。如果我减少窗口的宽度1个像素，列最终会崩溃。如果我然后展开它，它将返回到此状态。我想防止父引导程序面板溢出。我已经删除了bootstrap grid divs（row / col-xs-12等）以消除了一些问题，但是一旦解决了这个问题（或者我更好地理解了这个问题），我打算也使用bootstrap网格系统。

这是一个完美复制问题的plunkr（折叠运行视图）： http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR?p=preview

<!DOCTYPE html>

<html>
<head>
    <title>Tables - PixelAdmin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
    <style>
        body {
            font-size: 140%;
        }

        table.dataTable th,
        table.dataTable td {
            white-space: nowrap;
        }
    </style>
</head>

<body style="padding-top: 40px;">

<div class="panel panel-primary" style="margin: 51px; padding: 0;">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body" style="padding: 0;">
        <div style="width: 100%; border: 1px solid red;">
            <table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<script>
    $(document).ready(function () {
        $('#example')
                .dataTable({
                    "responsive": true,
                    "ajax": 'data.json'
                });
    });
</script>

</body>
</html>

Answer 1

在表格开始之前添加带有“表格响应”类的Div，并从表格标签中删除width =“100％”，

<div class="panel panel-primary" style="margin: 50px;">
<div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
    <div style="width: 100%; padding-left: -10px; border: 1px solid red;">
    <div class="table-responsive">  // add this div
        <table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> // remove width from this
            <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
            </thead>
        </table>
        </div>
    </div>
</div>

Answer 2

我知道这篇文章已经过时了，对于任何试图完成此任务的人来说，只需这样做

<table id="example" class="display" cellspacing="0" width="100%"></table>

添加宽度=“100％”它应该采取它，并使其响应没有任何配置

结帐Fiddle Working

Answer 3

对于我来说，当我将表容器div放在bootstrap行div中时问题得到解决。

<div class="row">
 <div class="table-responsive">
   ... //table here
 </div>
</div>

原因是datatables bootstrap版本正在向工具栏添加一些col- *（在我的例子中），这些col-*作为另一个父col- 下的直接子项而下降。 col - 理想情况下应该是行而不是col的子项（据我所知）。

Answer 4

在我的情况下，我发现使用CSS display：none来隐藏表或它的容器在页面加载时没有避免响应行为。

（未推荐）解决方案是通过JavaScript而不是CSS隐藏表或它的容器。

Answer 5

我知道这篇文章很旧，但是如果有人遇到此问题，请尝试以下操作：

更新DataTable的内容后，请使用以下代码（dt_table是我的Responsive DataTable实例）：

dt_table.draw();
dt_table.columns.adjust().responsive.recalc();

更多信息：https://datatables.net/reference/api/responsive.recalc()

Answer 6

从DataTables版本1.10.12更新到1.10.8时，我遇到了类似的问题。

可访问性扫描已将width =“ 100％”和cellspacing属性标记为负，因此我从html中删除了它们，并切换到单独文件中的css选择器。

调整表大小开始失败，并开始触发水平滚动条。我注意到该元素的样式已自动设置为style =“ width：px;”。

我必须将CSS中的选择器设置为width：100％！important。 border-spacing属性不需要这样做。

我还看到了提到100％宽度的其他答案，但我没有意识到这是需要“！important”标签的。

我永远无法确定是什么触发了更改，但我们将jquery.dataTables.js和dataTables.sensitive.js以及引导程序一起使用。

Answer 7

我的情况就像cem一样，但在我的情况下，我通过添加setTimeout来等待一段时间（大约200毫秒）来设置数据表

Answer 8

对我有用的是将表放在具有自定义类dtable-container的容器中

HTML

 <div class="dtable-container">
  <table id="datatable" class="table table-striped table-bordered">

  </table>
 </div>

CSS / LESS

.dtable-container {
    max-width: 100% !important;


    table {
        white-space: nowrap !important;
        width:100%!important;
        border-collapse:collapse!important;
    }
}

Answer 9

您需要包括响应式CSS和js

https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.css
https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js

 <table class="table table-striped table-bordered dataTable display" cellspacing="0" width="100%">
</table>

这对我有用。永远记住一件事，您必须包括jquery以及datatable css和js。

$('.dataTable').dataTable({
         "responsive": true,

    });

响应式Bootstrap数据表不会在正确的位置折叠列

9 个答案: