CSS Bootstrap 4 响应式表格不会占用 100% 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41747667/
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
Bootstrap 4 responsive tables won't take up 100% width
提问by eat-sleep-code
I am building a web app using Bootstrap 4 and running into some weird issues. I want to utilize Bootstrap's table-responsive class to allow horizontal scrolling of the tables on mobile devices. On desktop devices the table should take up 100% of the containing DIV's width.
我正在使用 Bootstrap 4 构建一个网络应用程序并遇到一些奇怪的问题。我想利用 Bootstrap 的表格响应类来允许在移动设备上水平滚动表格。在桌面设备上，表格应占据包含 DIV 宽度的 100%。
As soon as I apply the .table-responsive class to my table, the table shrinks horizontally and no longer takes up 100% of the width. Any ideas?
一旦我将 .table-responsive 类应用到我的桌子上，桌子就会水平缩小，不再占据 100% 的宽度。有任何想法吗？
Here is my markup:
这是我的标记：
<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
<title></title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="application-name" content="">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive" id="Queue">
<thead>
<tr>
<th><span span="sr-only">Priority</span></th>
<th>Origin</th>
<th>Destination</th>
<th>Mode</th>
<th>Date</th>
<th><span span="sr-only">Action</span></th>
</tr>
</thead>
<tbody>
<tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
<td>0</td>
<td>PHOENIX, AZ</td>
<td>SAN DIEGO, CA</td>
<td>DRIVING</td>
<td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
<td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
</tr>
<tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
<td colspan="6" class="no-padding"></td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/bundle.min.js"></script>
</body>
</html>
If I apply a 100% width to the .table-responsive class, it makes the table itself a 100% wide but the child elements (TBODY, TR, etc.) are still narrow.
如果我将 100% 的宽度应用于 .table-responsive 类，它会使表格本身变成 100% 的宽度，但子元素（TBODY、TR 等）仍然很窄。
回答by John FatBoy Doeeee Rolla
The following WON'T WORK. It causes another issue. It will now do the 100% width but it won't be responsive on smaller devices:
以下将不起作用。它会导致另一个问题。它现在将执行 100% 宽度，但它不会在较小的设备上响应：
.table-responsive {
display: table;
}
All these answers introduced another problem by recommending display: table;. The only solution as of right now is to use it as a wrapper:
所有这些答案都通过推荐引入了另一个问题display: table;。目前唯一的解决方案是将其用作包装器：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
回答by Faytraneozter
This solution worked for me:
这个解决方案对我有用：
just add another class into your table element:
w-100 d-block d-md-table
只需将另一个类添加到您的表格元素中：
w-100 d-block d-md-table
so it would be :
<table class="table table-responsive w-100 d-block d-md-table">
所以它会是：
<table class="table table-responsive w-100 d-block d-md-table">
for bootstrap 4 w-100set the width to 100% d-block(display: block) and d-md-table(display: table on min-width: 576px)
对于引导程序 4，w-100将宽度设置为 100% d-block（显示：块）和d-md-table（显示：最小宽度上的表格：576px）
回答by Marcelo Myara
If you're using V4.1, and according to their docs, don't assign .table-responsive directly to the table. The table should be .table and if you want it to be horizontally scrollable (responsive) add it inside a .table-responsive container (a <div>, for instance).
如果您使用的是 V4.1，并且根据他们的文档，请不要将 .table-responsive 直接分配给表格。该表应该是 .table ，如果您希望它可以水平滚动（响应），请将其添加到 .table-responsive 容器（<div>例如 a ）中。
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive.
响应式表格允许轻松地水平滚动表格。通过使用 .table-responsive 包装 .table使任何表格在所有视口中都具有响应性。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
doing that, no extra css is needed.
这样做，不需要额外的 css。
In the OP's code, .table-responsive can be used alongside with the .col-md-12 on the outside .
在 OP 的代码中， .table-responsive 可以与外部的 .col-md-12 一起使用。
回答by Serg Chernata
For some reason the responsive table in particular doesn't behave as it should. You can patch it by getting rid of display:block;
出于某种原因，响应式表的行为尤其不正常。你可以通过摆脱它来修补它display:block;
.table-responsive {
display: table;
}
I may file a bug report.
我可能会提交错误报告。
Edit:
编辑：
回答by SongBox
None of these answers are working (date today 9th Dec 2018). The correct resolution here is to add .table-responsive-sm to your table:
这些答案都不起作用（日期为今天 2018 年 12 月 9 日）。正确的解决方法是将 .table-responsive-sm 添加到您的表中：
<table class='table table-responsive-sm'>
[Your table]
</table>
This applies the responsiveness aspect only to the SM view (mobile). So in mobile view you get the scrolling as desired and in larger views the table is not responsive and thus displayed full width, as desired.
这仅将响应性方面应用于 SM 视图（移动）。因此，在移动视图中，您可以根据需要进行滚动，而在较大的视图中，表格没有响应，因此根据需要显示为全宽。
Docs: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
文档：https: //getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
回答by Rubén_ic
The solution compliant with the v4 of the framework is to set the proper breakpoint. Rather than using .table-responsive, you should be able to use .table-responsive-sm (to be just responsive on small devices)
符合框架v4的解决方案是设置合适的断点。而不是使用 .table-responsive，你应该能够使用 .table-responsive-sm （只是在小型设备上响应）
You can use any of the available endpoints: table-responsive{-sm|-md|-lg|-xl}
您可以使用任何可用的端点：table-responsive{-sm|-md|-lg|-xl}
回答by Alexis
Taking in consideration the other answers I would do something like this, thanks!
考虑到其他答案，我会做这样的事情，谢谢！
.table-responsive {
@include media-breakpoint-up(md) {
display: table;
}
}
回答by Nikhil Nanjappa
That's because the .table-responsiveclass adds the property display: blockto your element which changes it from the previous display: table.
那是因为.table-responsive该类将该属性添加display: block到您的元素中，从而将其从之前的display: table.
Override this property back to display: tablein your own stylesheet
display: table在您自己的样式表中重写此属性
.table-responsive {
display: table;
}
Note: make sure this style executes after your bootstrap code for it to override.
注意：确保此样式在引导代码之后执行以覆盖它。
回答by Callum
It's caused by the table-responsiveclass giving the table a property of display:block, which is strange because this overwrites the tableclasses original display:tableand is why the table shrinks when you add table-responsive.
这是由table-responsive类为表提供了 属性引起的display:block，这很奇怪，因为这会覆盖table原始类display:table，这就是为什么添加table-responsive.
Most likely its down to bootstrap 4 still being in dev. You are safe to overwrite this property with your own class that sets display:tableand it won't effect the responsiveness of the table.
最有可能的原因是引导程序 4 仍在开发中。您可以安全地使用自己设置的类覆盖此属性，display:table并且不会影响表的响应能力。
e.g.
例如
.table-responsive-fix{
display:table;
}
回答by iMezied
Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
通过用 .table-responsive{-sm|-md|-lg|-xl} 包裹任何 .table 来创建响应式表格，使表格在每个最大宽度断点处水平滚动，最大（但不包括）576px、768px，分别为 992 像素和 1120 像素。
just wrap table with .table-responsive{-sm|-md|-lg|-xl}
只需用 .table-responsive{-sm|-md|-lg|-xl} 包裹表格
for example
例如
<div class="table-responsive-md">
<table class="table">
</table>
</div>
