如何让Bootstrap 4表格占满整个屏幕宽度？

我来帮你搞定这个表格宽度的问题！你的代码里有两个关键问题导致表格没法撑满屏幕：

1. container 类的限制：Bootstrap的container类是固定宽度的（不同断点下有不同的max-width），而且默认带有左右内边距，这就导致它没法完全占满屏幕宽度。
2. 自定义的margin:10px：这个样式给容器加了左右外边距，进一步压缩了表格的可用空间，所以右侧会出现空白。

修正方案 #

你可以按照下面的步骤调整代码：

• 把container替换成container-fluid：这个类会让容器占满整个视口宽度，没有固定的max-width限制。
• 移除或调整自定义的外边距：如果需要表格和屏幕边缘有间距，建议用padding代替margin，这样不会压缩容器的宽度。
• 确保表格本身的宽度设置：虽然Bootstrap的table默认是width:100%，但显式加上可以避免被其他样式覆盖。

修改后的代码示例 #

<div class="container-fluid" style="padding: 10px;">
  <div class="table-responsive">
    <table class="table table-bordered table-sm table-striped" style="width: 100%;">
      <!-- 表格内容 -->
    </table>
  </div>
</div>

额外说明 #

• container-fluid会自动适配所有屏幕尺寸，始终占满视口宽度。
• padding:10px会给容器内部留出10px的间距，既保证表格和屏幕边缘有间隙，又不会让容器缩进去。
• 如果不需要任何间距，直接去掉style="padding:10px;"即可，表格会完全贴紧屏幕边缘。

内容的提问来源于stack exchange，提问作者Gargoyle