twitter-bootstrap 带有 Bootstrap 表响应的数据表总是有小的 x 溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33808714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables with Bootstrap's table-responsive always has small x-overflow
提问by gwg
I am using DataTables and Bootstrap but always seeing a tiny bit of x-overflow on my tables, no matter how many or few columns I have. Screenshot:
我正在使用 DataTables 和 Bootstrap，但总是在我的表上看到一点点 x 溢出，无论我有多少列。截屏：
My markup:
我的标记：
<div class="table-responsive">
<table class="table data-table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
I don't apply any styles to the data-tableclass and the tableand table-responsiveclasses are both Bootstrap's.
我没有对data-table类应用任何样式，并且table和table-responsive类都是 Bootstrap 的。
My initialization code:
我的初始化代码：
$('.data-table').DataTable();
How can I eliminate this unnecessary x-scroll? I want it only to be used when the screen is much smaller and the columns obviously do not fit.
如何消除这种不必要的 x 滚动？我希望它只在屏幕小得多并且列显然不适合时使用。
采纳答案by Gyrocode.com
SOLUTION
解决方案
You need to use a container. Wrap your markup in a divwith class containeror container-fluid.
您需要使用容器。将您的标记包装在divwith 类container或container-fluid.
<div class="container-fluid">
<div class="table-responsive">
<table class="table data-table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
Also add the following CSS rule:
还要添加以下 CSS 规则：
.table-responsive {
overflow-x: inherit;
}
DEMO
演示
See this jsFiddlefor code and demonstration.
有关代码和演示，请参阅此 jsFiddle。
回答by Tasos K.
The x-scrolloccurs due to the .table-responsiveclass with combination of the DataTables plugin
在x-scroll由于发生.table-responsive类与数据表插件的组合
The .table-responsiveclass needs be at the parent element of the table. This is true when looking at the HTML part but it is not true after the plugin has initialized, since DataTables adds a lot of additional markup.
该.table-responsive班的需求是在表的父元素。在查看 HTML 部分时确实如此，但在插件初始化后就不是这样了，因为 DataTables 添加了很多额外的标记。
A workaround for this is to omit the .table-responsiveclass in your HTML and add it using jQuery after the plugin has initialized.
一种解决方法是.table-responsive在您的 HTML 中省略该类，并在插件初始化后使用 jQuery 添加它。
HTML:
HTML：
<div class="container-fluid">
<table id="example" class="table" 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>
</tr>
</thead>
...
</table>
</div>
JavaScript:
JavaScript：
$(document).ready(function () {
var table = $('#example').DataTable();
$('#example').parent().addClass('table-responsive');
});
Here is a jsfiddle. Many thanks to @Gyrocode.comfor providing the original jsfiddle in his answer here!
这是一个 jsfiddle。非常感谢@Gyrocode.com在他的回答中提供了原始的 jsfiddle！
回答by MyNameIsKo
Forget Bootstrap and use the DataTables' property, scrollX set to 100%.
忘记 Bootstrap 并使用 DataTables 的属性，将 scrollX 设置为 100%。
See it in use here: https://datatables.net/examples/basic_init/scroll_x.html
在此处查看它的使用情况：https: //datatables.net/examples/basic_init/scroll_x.html
The one caveat I've found is that the table must be visible on page load. If it's not, the theadelement will be misaligned with the tbody.
我发现的一个警告是表格必须在页面加载时可见。如果不是，thead元素将与tbody.
回答by Kodos Johnson
I think Tasos K.'s answer pretty much sums it up. But there is actually an even better way to add the table-responsivediv as a parent of the table. There is a domsetting that let's you define the order of DataTables components as well as additional HTML that should be inserted into the DataTables' markup.
我认为 Tasos K. 的回答几乎总结了它。但实际上有一种更好的方法可以将table-responsivediv添加为表的父级。有一个dom设置可让您定义 DataTables 组件的顺序以及应插入到 DataTables 标记中的其他 HTML。
The default value of the domsetting is lfrtip. This defines the order of the DataTables' components. Each letter represents a component (for example, the letter 't' represents the actual table). The letters are explained in the DataTables reference here: https://datatables.net/reference/option/dom#Options
的默认值dom设置为lfrtip。这定义了 DataTables 组件的顺序。每个字母代表一个组件（例如，字母“t”代表实际表）。这些字母在此处的 DataTables 参考中进行了解释：https: //datatables.net/reference/option/dom#Options
You can also define additional HTML to insert into the DataTables' markup. DataTables has a special format to define how to add HTML. For instance, to wrap the table with a div with class table-responsive, you have to wrap the letter 't' with <'table-responsive'and >. The description of the markup format is explained here: https://datatables.net/reference/option/dom#Markup
您还可以定义其他 HTML 以插入到 DataTables 的标记中。DataTables 有一种特殊的格式来定义如何添加 HTML。例如，要使用带有 class 的 div 包裹表格table-responsive，您必须使用<'table-responsive'and包裹字母“t” >。这里解释了标记格式的描述：https: //datatables.net/reference/option/dom#Markup
When you use the Bootstrap integration, as is the case with the OP, the default value of domis overwritten with a different value to make DataTables work with the Bootstrap layout. According to the online reference, the value of domis changed to
当您使用 Bootstrap 集成时，与 OP 的情况一样，默认值dom被不同的值覆盖，以使 DataTables 与 Bootstrap 布局一起使用。根据在线参考， 的值dom更改为
<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>
In order to add a div with class table-responsiveas a direct parent of the table, you will have to change this string to
为了添加一个带有 class 的 divtable-responsive作为表的直接父级，您必须将此字符串更改为
<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'<'table-responsive't>r>><'row'<'col-sm-5'i><'col-sm-7'p>>
Here is a snippet with my solution. I copied the code from Tasos K.'s answer.
这是我的解决方案的一个片段。我从 Tasos K. 的回答中复制了代码。
$(document).ready(function () {
var table = $('#example').DataTable({
"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'<'table-responsive't>r>><'row'<'col-sm-5'i><'col-sm-7'p>>"
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script>
<link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet"/>
<div class="container-fluid">
<table id="example" class="table" 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>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>3,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>2,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>7,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>7,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>5,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>0,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>3,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>5,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>8,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>7,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>2,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>7,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>5,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>5,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>6,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>7,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>6,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>0,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>3,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>4,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>5,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>5,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>4,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>4,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>9,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>2,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>6,200</td>
</tr>
<tr>
<td>Hymanson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>5,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>4,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>3,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>9,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>8,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>5,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>5,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>5,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>6,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>3,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>3,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>3,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>2,000</td>
</tr>
</tbody>
</table>
</div>回答by Dextere
Add .container-fluid variation for full-width containers and layouts. It was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
为全宽容器和布局添加 .container-fluid 变体。它是在 v3.1.0 中引入的：http://getbootstrap.com/css/#grid-example-fluid
or try
或尝试
body { overflow-x: hidden;}
it's a bad alternative, but it work.
这是一个糟糕的选择，但它有效。
