Question

我希望将此数据表适合屏幕，100％宽度。我尝试在<div>和<table>上将width属性设置为100％但仍超出屏幕长度。

我正在为CSS部分使用Bootstrap样式。我的目标是将数据表安装在容器内。

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>

JS：

$(document).ready(function() {
    $('#example').DataTable();
} );

更新如果我将<table>元素css设置为以下内容，则表格将使用horizental滚动条适合容器。如果有一种方法可以在没有滚动条的情况下安装桌子，那还是很棒的。

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

Answer 1

试试这个

这是jQuery和Bootstrap的响应式dataTable组合。

我更改了一些脚本。

添加了Class table table-bordered dt-response to table

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

使数据表适合屏幕

1 个答案: