Bootstrap响应式表格没有按照预期进行响应。

Question

我正在处理下面的代码，并试图找出以下问题：

1. 为什么表格没有响应式效果
2. 我想通过使用 col-md-3 和 col-lg-3 来控制 <td> 的宽度；这在表格中是否有效？

以下是我的代码：

<div class="col-md-offset-1  col-lg-offset-1 col-md-6    col-lg-6">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<td width="174"><strong>7:30 – 8:45 a.m.</strong></td>
<td>Arrival / Health CheckFree Choice in Activity Areas, books, puzzles, matching games, large block building, small blocks, floor toys, Lego, trucks and car play.</td>
</tr>
<tr>
<td><strong>8:45 – 9:00 a.m.</strong></td>
<td>Clean-up, toileting, wash up for snack</td>
</tr>
<tr>
<td><strong>9:00 – 9:30 a.m.</strong></td>
<td>Morning snack</td>
</tr>
<tr>
<td><strong>9:30 -10:00 a.m.</strong></td>
<td>Circle Time: Action songs, singing time, finger plays, hello songs, discussion of daily activities</td>
</tr>
   </tbody>
</table>
</div>

如你所见，我无法使用col-md-3和col-lg-3来控制表格的大小，因此我将其包裹在一个div中，但响应式效果并未生效。

- Mona Coder

Answer 1

请重新阅读此功能的文档。 table-responsive类需要在包装

中而不是表格本身上。

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

- ceejayoz

---

谢谢ceejayoz，那么td的宽度呢？我们能通过列-**-*类来控制它们吗？ - Mona Coder

col-* 类只是设置了一个百分比宽度，这与使用 <td width="10%"> 相似。 - ceejayoz

没有<div class="table-responsive">，我的表格也是响应式的。我只使用了表格类。我不知道它是如何实现的。 - Sasa1234

谢谢！我无意中阅读了Bootstrap 4 alpha的文档，确实需要直接在表格中添加这个类，而不是包装器。至少示例是这样显示的。所以这可能会在未来改变。 - jlh

如果table-responsive div在表格的td内部，这种方法不起作用。有什么解决方案吗？请建议一下。谢谢。 - Kamlesh

Answer 2

.table-responsive 应该放在包装 div 上，因为即使使用 css 属性 overflow:scroll 在表格标签上也不会激活滚动条，所以我们使用带有类 table-responsive 的包装 div 来显示滚动条，以使表格具有响应性。

这就是我们需要像这样编写响应式表格代码的原因。

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

- Gaurav Aggarwal

---

如果table-responsive div在表格的td内部，则此方法无效。有什么解决方案吗？请给我建议。谢谢。 - Kamlesh

Answer 3

我将所有的表格都用以下类进行包装，无论是Bootstrap还是其他方式，它都能正常工作。

.respTable {
   overflow-y: scroll;
   margin: 5px;
}

- Michael Nelles

Answer 4

如果您将表格设置为display: block，则在表格本身上设置table-responsive类是有效的。不过，通常最好只使用包装器div。

- Andrew Dant