引导响应表未响应响应

Question

我正在研究下面的代码，并试图找出答案：

1. 为什么桌子没有响应
2. 我希望能够通过使用

   <td>

   和

   col-md-3

   来控制

   col-lg-3

   宽度；这也适用于表格吗？

这是我的代码：

<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 中，但响应能力不起作用。

Answer 1

请重新阅读有关此功能的文档。

table-responsive

类需要位于包装 div 上，而不是表本身。

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

Answer 2

.table-responsive

应该位于包装器 div 上，因为即使您使用 css 属性

overflow:scroll

滚动条也不会在表格标签上激活，因此我们使用带有

table-responsive

类的包装器 div 来显示滚动条以使表格响应。

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

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

Answer 3

如果您还将表格设置为

table-responsive

，则在表格本身上设置

display: block

类确实有效。不过，通常最好只使用包装器

div

。

Answer 4

我用下面的类来包装我的所有桌子。无论是 Bootstrap 还是其他方式，它每次都有效。

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