Bootstrap responsive table not acting responsively

Question

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

Why the table is not acting responsive
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.

score 54 · Accepted Answer · answered Nov 21 '13 at 22:49

54

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>

answered Nov 21 '13 at 22:49

ceejayoz

176,543
40
303
368

Thanks ceejayoz, how about width of the td ? can we control them by col-**-* classes? – Mona Coder Nov 21 '13 at 23:29
The `col-*` classes just set a percentage width, which'll work similar to just doing ``. – ceejayoz Nov 22 '13 at 00:34
Without `
` also tables are responsive in my side. I use only table class. I don't know how it happens.
– Sasa1234 Feb 24 '16 at 11:41
Thanks! I accidentally read the documentation for bootstrap 4 alpha, where you indeed need to add this class to the table directly, not the wrapper. At least the example shows it that way. So this might change in the future. – jlh Jun 07 '17 at 15:26
This does not work if table-responsive div is inside a table's td. Any solution?? Please suggest me. Thanks. – Kamlesh Nov 29 '22 at 16:12

score 1 · Answer 2 · answered Mar 21 '16 at 07:34

1

.table-responsive should be on wrapper div because even if you use css property overflow:scroll scrollbar will not active on table tag so we are using a wrapper div with class table-responsive to show to scroll bar to make table responsive.

This is the reason we need to write responsive table code like this

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

answered Mar 21 '16 at 07:34

Gaurav Aggarwal

9,809
6
36
74

This does not work if table-responsive div is inside a table's td. Any solution?? Please suggest me. Thanks. – Kamlesh Nov 29 '22 at 16:12

score 0 · Answer 3 · edited Apr 12 '17 at 15:00

0

It does work to set the table-responsive class on the table itself if you also set the table to display: block. It's generally better to just use the wrapper div though.

edited Apr 12 '17 at 15:00

Fabio says Reinstate Monica

5,271
9
40
61

answered Apr 12 '17 at 14:32

Andrew Dant

81
5

score 0 · Answer 4 · answered May 12 '20 at 17:11

0

I wrap all my tables with the following class. Bootstrap or otherwise and it works every time.

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

answered May 12 '20 at 17:11

Michael Nelles

5,426
8
41
57

Bootstrap responsive table not acting responsively

4 Answers4