html - 响应表不工作

Question

我不知道为什么表格不能按设备缩放。例如，在移动设备上我有一个滚动条，但我希望表格可以缩放。这是我的代码

<div class="table-responsive">
  <p class="title-table">text</p>
  <table class="table">
    <thead>
      <tr>
        <th class="table-header">txt</th>
        <th class="table-header">txt/th>
        <th class="table-header">txt</th>
      </tr>
    </thead>
    <tbody class="table-body-text">
      <tr class="table-bg-light">
        <td>txt</td>
        <td>txt</td>
        <td>stxt</td>
      </tr>
      <tr class="table-bg-dark">
        <td>txt/td>
        <td>1xttttt</td>
        <td>txt</td>
      </tr>
      <tr class="table-bg-light">
        <td>txt</td>
        <td>125dc</td>
        <td>Ptxtxt</td>
      </tr>
    </tbody>
  </table>
</div>

这是 jsfiddle - https://jsfiddle.net/q23c5ckn/ 这是我想要的示例 - https://jasonbradley.me/2013/09/05/bootstrap-responsive-tables/

Answer 1

编辑 - DEMO

.table {
  width:100%;
  background:red;
  word-break: break-word; /* will break word to fit */
}

---

如果我让您更正，这就是您所需要的 DEMO

CSS

.table {
  width:100%;
  background:red
}

.table-responsive {
  overflow:scroll;
}