Bootstrap 4响应表不会占用100% 的宽度

由于某些原因，特别是响应表没有按照它应该的方式运行。你可以通过去掉 display:block;来修补它

.table-responsive {
display: table;
}

我可能会提交一份错误报告。

Edit:

这是一个存在的错误。

这是因为 .table-responsive类将属性 display: block添加到您的元素中，该元素将其从以前的 display: table更改。

在您自己的样式表中重写此属性返回到 display: table

.table-responsive {
display: table;
}

注意: 确保该样式在引导程序代码之后执行，以便重写。

这是由于 table-responsive类为表提供了 display:block的属性，这很奇怪，因为它覆盖了原来的 display:table类，这也是为什么当您添加 table-responsive时表会收缩的原因。

最有可能的是引导程序4仍然在开发中。您可以安全地用自己的设置 display:table的类覆盖此属性，而且它不会影响表的响应性。

例如:。

.table-responsive-fix{
display:table;
}

下面的方法行不通。这会引起另一个问题。它现在可以达到100% 的宽度，但是在更小的设备上不能响应:

.table-responsive {
display: table;
}

所有这些答案通过推荐 display: table;引入了另一个问题。目前唯一的解决办法就是把它当作包装纸使用:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

考虑到其他的答案，我会做这样的事情，谢谢！

.table-responsive {
@include media-breakpoint-up(md) {
display: table;
}
}

This solution worked for me:

只需在 table 元素中添加另一个类: w-100 d-block d-md-table

那就是: <table class="table table-responsive w-100 d-block d-md-table">

对于 bootstrap 4 w-100，将宽度设置为100% d-block(显示: 块)和 d-md-table(显示: 表的最小宽度: 576px)

引导程序4显示文档

与框架的 v4兼容的解决方案是设置适当的断点。而不是利用。表响应，您应该能够使用。表-响应-短信(只是在小型设备上响应)

您可以使用任何可用的端点: 表响应{-sm |-md |-lg |-xl }

如果您使用的是 V4.1，并且根据他们的文档，不要指定。表-直接对表作出响应。这张桌子应该是。表，如果您希望它是水平滚动(响应)添加到一个。表响应容器(例如，<div>)。

响应式表格允许轻松地水平滚动表格。通过 用. table 响应包装.table。使任何表格在所有视图中响应

<div class="table-responsive">
<table class="table">
...
</table>
</div>

这样就不需要额外的 css 了。

在 OP 的代码中，. table-response 可以与外部的. col- md-12一起使用。

我发现，在包装器中使用推荐的表响应类仍然会导致响应表水平收缩(令人惊讶) :

<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>

我的解决方案是创建以下媒体断点和类来防止它:

.table-xs {
width:544px;
}


.table-sm {
width: 576px;
}


.table-md {
width: 768px;
}


.table-lg {
width: 992px;
}


.table-xl {
width: 1200px;
}


/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {
.table-sm {
width: 100%;
}
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
.table-sm {
width: 100%;
}


.table-md {
width: 100%;
}
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.table-sm {
width: 100%;
}


.table-md {
width: 100%;
}


.table-lg {
width: 100%;
}
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.table-sm {
width: 100%;
}


.table-md {
width: 100%;
}


.table-lg {
width: 100%;
}


.table-xl {
width: 100%;
}
}

然后我可以将适当的类添加到我的 table 元素中，例如:

<div class="table-responsive-lg">
<table class="table table-lg">
...
</table>
</div>

在这里，包装器为每个 Bootstrap 设置宽度为100% 。通过将 table-lg 类应用于 table 元素，可以将大于等于100% 的 table 宽度设置为100% ，但是将中等大小的 table 宽度设置为992px。Table-xs、 table-sm、 table-md 和 table-xl 类的工作方式相同。

这些答案都不起作用(日期: 2018年12月9日)。这里的正确解决方案是添加。表-响应-短信到您的表:

<table class='table table-responsive-sm'>
[Your table]
</table>

这仅将响应性方面应用于 SM 视图(移动)。所以在移动视图中，你可以根据需要滚动，而在较大的视图中，表格没有响应，因此可以根据需要显示全宽。

医生: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

对于 Bootstrap 4.x，使用显示实用程序:

w-100 d-print-block d-print-table

用法 :

<table class="table w-100 d-print-block d-print-table">

包装任何. table，以创建响应表 . table-response {-sm |-md |-lg |-xl } ，使表滚动 在每个最大宽度断点水平上最多(但不包括) 分别为576像素、768像素、992像素和1120像素。

只需用. table-response {-sm |-md |-lg |-xl }包装表即可

比如说

<div class="table-responsive-md">
<table class="table">
</table>
</div>

bootstrap 4 tables

似乎表中的“ sr-only”元素及其样式是导致这个 bug 的原因。至少我有同样的问题，经过几个月的撞击我们的头墙，这就是我们确定的原因是什么，虽然我仍然不明白为什么。将 left:0添加到“ sr-only”样式中修复了这个问题。

不确定是否有帮助，但是将表的响应类包装为 div，并将. response-table 类添加到这两个类中:

table.table-responsive{
display: block;
overflow: scroll;
}




.table-responsive {
overflow: hidden;
padding: 0px;
margin: 0px;
table-layout: fixed;
width: 100%;
display: table;
}

这给出了一个100% 扩展的周围 div，它可以根据列的宽度进行调整，同时使实际的表具有可滚动性。如果页面上有一个侧栏，那么上面的解决方案就不会起作用，因为它们假定页面宽度为100% 。