【发布时间】：2017-01-23 16:36:13
【问题描述】：
我想使这个数据表适合屏幕，100% 宽度。我尝试在 <div> 和 <table> 上将宽度属性设置为 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 设置为以下内容，则表格可以很好地放入容器中并带有水平滚动条。如果有一种方法可以在没有滚动条的情况下适应表格，那就太好了。
table{
width:100%;
overflow-x:auto;
display:block;
}
【问题讨论】：
标签： jquery html css twitter-bootstrap datatables