-2

How can I make a table scrollable without effecting the grid system? How can I make table scrollable without disturbing the col-xs tag?

 <table class="col-xs-12">  
    <thead>
                            <th class="col-xs-2">A</th>
                            <th class="col-xs-1">B</th>
                            <th class="col-xs-1">c</th>
                            <th class="col-xs-2">d</th>
                            <th class="col-xs-2">e</th>
                            <th class="col-xs-1">f</th>
                            <th class="col-xs-1">g</th>
                            <th class="col-xs-1">h</th>
                            <th class="col-xs-1">i</th>
                          </thead>
                          <tbody>
                              <tr>
                                <td><input type="text" class="form-control""></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                              </tr>
                          </tbody>
                        </table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user3782454
  • 21
  • 1

2 Answers2

0

Does the table need to be scrollable on all screen sizes?

If you just need it to scroll on small devices you can use bootstrap's .table-responsive class

http://getbootstrap.com/css/#tables-responsive

ChaoticNadirs
  • 2,280
  • 2
  • 20
  • 27
  • it should be scrollable when tbody has more than 3 rows :) – user3782454 Sep 22 '14 at 10:46
  • @user3782454 Ah, I thought you wanted horizontal scroll rather than vertical. For vertical scroll take a look at the answer here: http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap – ChaoticNadirs Sep 22 '14 at 10:52
0

Have you tried to wrap a table inside the div with class table-responsive and changing col-xs-12 to table or at worst row?. I haven't been using Bootstrap for a while so sorry if I am wrong.

If you think about vertical scroll then, well, maybe fixed height for the table container (let it be div) and overflow: scroll?

Wojciech Fornal
  • 1,265
  • 11
  • 11