使数据表适合屏幕
我想使这个数据表适合屏幕,宽度为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;
}
试试这个
这是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>
试过这个? @payam – Sreemat
我尝试了解决方案,这是一个不错的主意,谢谢!尽管我需要对信息进行概述,但我决定将水平滚动条与通过API隐藏/显示列的可能性结合起来。 –
我将您的解决方案与一些flexbox组合在一起,并将其用于我应用程序的另一部分。为此,我会祝福你! –
你有大约24列,这可能需要分'1920x1080' RES显示没有滚动条。你可以试试这个[plugin](https://datatables.net/examples/basic_init/scroll_x.html),或者像[this]一样定义'fixed column width'(https://datatables.net/reference/option/columns。宽度) – Jag