使數據表適合屏幕

我想使這個數據表適合屏幕，寬度爲100％。我試圖在<div>和<table>上將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>

的JS：

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

更新： 如果我的<table>元素的CSS設置爲以下，該表在容器適合以及一個horizental滾動條。如果沒有滾動條來適應桌子，這仍然很棒。

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

來源

2017-01-23 Payam Mesgari

你有大約24列，這可能需要分'1920x1080' RES顯示沒有滾動條。你可以試試這個[plugin]（https://datatables.net/examples/basic_init/scroll_x.html），或者像[this]一樣定義'fixed column width'（https://datatables.net/reference/option/columns。寬度） – Jag

試試這個

這是jQuery和引導的響應dataTable的組合。

我改變了一些腳本。

添加的類表表鑲上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>

來源

2017-01-23 16:53:05 Sreemat

試過這個？ @payam – Sreemat

我嘗試瞭解決方案，這是一個不錯的主意，謝謝！儘管我需要對信息進行概述，但我決定將水平滾動條與通過API隱藏/顯示列的可能性結合起來。 –

我將您的解決方案與一些flexbox組合在一起，並將其用於我應用程序的另一部分。爲此，我會祝福你！ –

使數據表適合屏幕

回答

相關問題