如何调整Bootstrap HTML表格宽度？解决表格全屏显示问题

嘿，我来帮你搞定这个表格宽度的问题！先提个小细节，你代码里的表格类写得有点小问题：class="table, table table-striped" 这里的逗号和重复的table可以改成class="table table-striped"，这样更符合Bootstrap的类命名规范哦～

下面给你几种简单有效的调整方式：

方法1：用Bootstrap网格系统（最推荐，响应式友好） #

Bootstrap的核心就是网格布局，你可以把包裹表格的table-responsive容器放到网格列里，这样能轻松控制表格在不同屏幕尺寸下的宽度，还自带响应式效果。比如让表格在中等屏幕及以上占8列，小屏幕自动占满宽度：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h2>HTML Table</h2>
<!-- 用网格列控制宽度，mx-auto让容器居中 -->
<div class="container">
  <div class="row">
    <div class="col-md-8 mx-auto">
      <div class="table-responsive">
        <table class="table table-striped">
          <thead class="thead-dark">
            <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Country</th>
            </tr>
          </thead>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
          </tr>
          <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
</body>
</html>

方法2：用Bootstrap宽度工具类（快速简单） #

如果你不需要复杂的响应式控制，直接给table-responsive或者表格本身加Bootstrap的宽度工具类就行，比如w-75（占父容器75%宽度）、w-50（50%宽度），再配合mx-auto让表格居中：

<div class="table-responsive w-75 mx-auto">
  <table class="table table-striped">
    <!-- 表格内容不变 -->
  </table>
</div>

方法3：自定义CSS（精确控制） #

如果需要更精准的宽度数值，直接给表格或者外层容器加内联样式：

<div class="table-responsive" style="width: 80%; margin: 0 auto;">
  <table class="table table-striped">
    <!-- 表格内容不变 -->
  </table>
</div>

或者单独写内部样式（推荐这种，更易维护）：

<style>
  .custom-table-container {
    width: 900px; /* 固定宽度 */
    /* 或者用百分比：width: 80%; */
    margin: 0 auto;
  }
</style>

<div class="table-responsive custom-table-container">
  <table class="table table-striped">
    <!-- 表格内容不变 -->
  </table>
</div>

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