个人中心
gpt4 book ai didi

jquery - 响应式 Bootstrap 数据表未在正确的点折叠列

转载 作者：行者123 更新时间：2023-12-03 21:30:03 24 4
gpt4 key购买 nike

我正在使用最新的 Datatables.net，带有数据表和 Bootstrap 。我想我的问题是:Datatables Responsive Bootstrap 使用什么来检测溢出，因为它显然不是父宽度。

这是我的结果: enter image description here

这是一个非常简单的问题。如果我将窗口的宽度再减少 1 个像素，该列最终将崩溃。如果我随后扩展它，它会返回到这种状态。我想防止父 Bootstrap 面板溢出。我已经删除了 Bootstrap 网格 div(row/col-xs-12 等)以消除潜在的问题，但是一旦解决了这个问题(或者我更好地理解了问题)，我也打算使用 Bootstrap 网格系统。

这是一个完美复制问题的 plunkr(折叠运行 View ): 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>

最佳答案

在表格开始之前添加类为“table-responsive”的 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>

关于jquery - 响应式 Bootstrap 数据表未在正确的点折叠列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26500010/

24 4 0
文章推荐： c# - 自定义 JsonSchemaValidation 错误消息
文章推荐： r - 使用 knitr 以不同方式着色 R 输入和输出
文章推荐： python - 如何在没有 GAMS 的情况下使用 Python 读取 GDX 文件
文章推荐： ionic3 - 如何在 Angular 6 中添加 ng2-smart-table 嵌套列
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com