Bootstrap responsive table not acting responsively

Question

I am working on the code below, and am trying to find out:

1. Why the table is not acting responsive
2. I want able to control <td> widths by using col-md-3 and col-lg-3; does this works in table as well?

Here is the code I have:

<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>

As you can see I couldn't control the table size with col-md-3 and col-lg-3, so I wrapped it in a div but the responsiveness is not working.

Answer 1

Please re-read the docs on this feature. The table-responsive class needs to be on a wrapper div, not the table itself.

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