Контрольная таблица Bootstrap не реагирует

Не могли бы вы взглянуть на эту ссылку (прокрутите вниз до конца страницы) и дайте мне знать, почему "
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, но отзывчивость не работает

Ответ 1

Пожалуйста, перечитайте документы этой функции. Класс table-responsive должен находиться на обертке div, а не на самой таблице.

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

Ответ 2

.table-responsive должен быть на обертке div, потому что, даже если вы используете свойство css overflow:scroll, прокрутка не будет активна в теге таблицы, поэтому мы используем оболочку div с классом table-responsive, чтобы показать полосу прокрутки, чтобы сделать таблицу отзывчивой.

Вот почему нам нужно написать отзывчивый табличный код, подобный этому

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

Ответ 3

Выполняется установка класса table-responsive в самой таблице, если вы также установите таблицу в display: block. Обычно лучше просто использовать обертку div.