Fatal编程技术网
  • jquery/
  • Jquery 将数据表安装到屏幕

Jquery 将数据表安装到屏幕

jquery html css twitter-bootstrap datatables

Jquery 将数据表安装到屏幕,jquery,html,css,twitter-bootstrap,datatables,Jquery,Html,Css,Twitter Bootstrap,Datatables,我想让这个数据表适合屏幕，100%宽度。我尝试在和上将width属性设置为100%，但它仍然超出屏幕长度 我正在为css部分使用引导样式。我的目标是将数据表很好地放入容器中 HTML: <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="chrome" /> <title>GRM Logistics App</title

我想让这个数据表适合屏幕，100%宽度。我尝试在
和
上将width属性设置为100%，但它仍然超出屏幕长度

我正在为css部分使用引导样式。我的目标是将数据表很好地放入容器中

HTML:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome" />
    <title>GRM Logistics App</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="temp.js"></script>

</head>


<div class="container well">
    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>EX1</th>
                    <th>EX2</th>
                    <th>EX3</th>
                    <th>EX4</th>
                    <th>EX5</th>
                    <th>EX6</th>
                    <th>EX7</th>
                    <th>EX8</th>
                    <th>EX9</th>
                    <th>EX10</th>
                    <th>EX11</th>
                    <th>EX12</th>
                    <th>EX13</th>
                    <th>EX14</th>
                    <th>EX15</th>
                    <th>EX16</th>
                    <th>EX17</th>
                    <th>EX18</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>Sample 1</td>
                    <td>Sample 2</td>
                    <td>Sample 3</td>
                    <td>Sample 4</td>
                    <td>Sample 5</td>
                    <td>Sample 6</td>
                    <td>Sample 7</td>
                    <td>Sample 8</td>
                    <td>Sample 9</td>
                    <td>Sample 10</td>
                    <td>Sample 11</td>
                    <td>Sample 12</td>
                    <td>Sample 13</td>
                    <td>Sample 14</td>
                    <td>Sample 15</td>
                    <td>Sample 16</td>
                    <td>Sample 17</td>
                    <td>Sample 18</td>
                </tr>
            </tbody>
        </table>
    </div>

$(document).ready(function() {
    $('#example').DataTable();
} );
更新： 如果我将
元素css设置为以下值，则该表可以通过水平滚动条很好地放入容器中。不过，如果有一种方法可以在没有滚动条的情况下调整表格，那就太好了

table{
width:100%;
overflow-x:auto;
display:block;
}
试试这个

这是jQuery和Bootstrap的响应数据表组合

我更改了一些脚本

添加了类表，该类表以dt为边框，响应于表

<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome" />
    <title>GRM Logistics App</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js" type="text/javascript"></script>-->

</head>
<script>
    $(document).ready(function() {
        $('#example').dataTable();
    });
</script>

<div class="container well">
    <table id="example" class="table table-bordered dt-responsive" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>EX1</th>
                <th>EX2</th>
                <th>EX3</th>
                <th>EX4</th>
                <th>EX5</th>
                <th>EX6</th>
                <th>EX7</th>
                <th>EX8</th>
                <th>EX9</th>
                <th>EX10</th>
                <th>EX11</th>
                <th>EX12</th>
                <th>EX13</th>
                <th>EX14</th>
                <th>EX15</th>
                <th>EX16</th>
                <th>EX17</th>
                <th>EX18</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>Sample 1</td>
                <td>Sample 2</td>
                <td>Sample 3</td>
                <td>Sample 4</td>
                <td>Sample 5</td>
                <td>Sample 6</td>
                <td>Sample 7</td>
                <td>Sample 8</td>
                <td>Sample 9</td>
                <td>Sample 10</td>
                <td>Sample 11</td>
                <td>Sample 12</td>
                <td>Sample 13</td>
                <td>Sample 14</td>
                <td>Sample 15</td>
                <td>Sample 16</td>
                <td>Sample 17</td>
                <td>Sample 18</td>
            </tr>
        </tbody>
    </table>
</div>

</html>


GRM物流应用程序
-->
$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
});
名称
位置
办公室
年龄
开始日期
薪水
例1
例2
例3
例4
例5
例6
例7
例8
例9
例10
例11
例12
例13
例14
例15
例16
例17
例18
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
样本1
样本2
样本3
样本4
样本5
样本6
样本7
样本8
样本9
样本10
样本11
样本12
样本13
样本14
样本15
样本16
样本17
样本18
大约有24列，可能需要最小
1920x1080
res才能在没有滚动条的情况下显示。您可以试试这个，或者像这样定义
固定列宽
@payamI尝试了解决方案，这是一个好主意，谢谢！虽然我需要对信息进行概述，但我决定将水平滚动条与通过API隐藏/显示列的可能性结合起来。我将您的解决方案与一些flexbox结合起来，并在我的应用程序的另一部分中使用它。为此，我要投你一票！