Question

请你看看这个链接（请向下滚动到页面末尾），让我知道为什么“
1-表不是actinf响应？ 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

请重新阅读the docs on this feature。 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;
}

Bootstrap响应表不起作用

4 个答案: