94

My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.

How can I set table widths for mobile view? What other alternatives are there to present tabular data on mobile views using Bootstrap?

5
  • 2
    I noticed that Bootstrap 3.0 is going to be "mobile first." Does anyone think they will resolve this "issue" of mobile tables?
    – user810606
    Feb 13, 2013 at 3:51
  • Tables still seem to be the same in Bootstrap 3. :( Aug 23, 2013 at 13:27
  • 1
  • @ta.speot.is They're better now than in the release candidates. All of the examples there though only have 4 columns. Still doesn't work very well for wide tables. I've ended up using a solution with a fixed first column and all the rest scrolling. Oct 5, 2013 at 7:54
  • @ta.speot.is Just seen your answer below. Missed that Bootstrap 3 has a table-responsive class. Works well if you don't need certain columns to always be visible. Oct 5, 2013 at 7:59

4 Answers 4

130

Bootstrap 3 introduces responsive tables:

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

Bootstrap 4 is similar, but with more control via some new classes:

...responsive across all viewports ... with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Credit to Jason Bradley for providing an example:

Responsive Tables

13
  • 6
    Thank you. Like 99.9% of people, I didn't bother to read the documentation of the update. I guess I should have. Nov 4, 2013 at 0:37
  • 1
    Indeed, it is ! Plus, it's doing what I wanted to in the first place so for me it's a 2 in 1 ! Nov 4, 2013 at 1:08
  • What exactly does the table-responsive class do? Bootstrap docs says "to make them scroll horizontally", but I don't notice a difference related to scrolling. The only difference I notice is that the table gets borders on the outside when under a certain screen size (as seen in the example).
    – Dennis
    Mar 7, 2014 at 21:35
  • 5
    @ta.speot.is I realized I misread the documentation and was using the class incorrectly. I was adding .table-responsive to the table itself (e.g. <table class="table table-responsive">), instead of wrapping the table in .table-responsive, which you even pointed out in your example.
    – Dennis
    Mar 8, 2014 at 22:48
  • 1
    @PirateApp Use hidden-* on the tds of the columns you want to hide getbootstrap.com/docs/3.3/css/#responsive-utilities Jan 1, 2018 at 2:25
72

You might also consider trying one of these approaches, since larger tables aren't exactly friendly on mobile even if it works:

http://elvery.net/demo/responsive-tables/

I'm partial to 'No More Tables' but that obviously depends on your application.

4
  • 3
    Fantastic link and three really great solutions! I had to google my way back to this question just to upvote your answer. Thanks!
    – Simon
    Feb 27, 2013 at 10:02
  • 2
    An answer that consists solely of a link is bad Stack Overflow etiquette. The page could go missing, the content on the page can change, the answer isn't immediately visible, the answer cannot be improved, and so on. BTW the link doesn't point to the correct content any more.
    – Dennis
    Mar 7, 2014 at 21:24
  • Agreed, but for now: web.archive.org/web/20130725223053/http://elvery.net/demo/…
    – Chords
    Mar 7, 2014 at 21:50
  • 1
    @Dennis is right. Please elaborate your answer to summarize what's in the link and keep the link too for demos and further details. You get my upvote nonetheless as the link is super interesting. Cheers.
    – Mario Awad
    Jul 15, 2015 at 9:06
5

All tables within bootstrap stretch according to the container they're in. You can put your tables inside a .span element to control the size. This SO Question may help you out

Why do Twitter Bootstrap tables always have 100% width?

3

After researching for almost 1 month i found the below code which is working very beautifully and 100% perfectly on my website. To check the preview how it is working you can check from the link. https://www.jobsedit.in/state-government-jobs/

and

https://www.jobsrob.in/category/central-government-jobs/

CSS CODE-----

@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:White;
        text-indent: 50%; 
        text-align:left;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:center;
}   
    .resp td:before  { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:left;
        white-space: nowrap;
        background-color:White;
        font-weight:bold;
    }
    /*
    Label the data
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

HTML CODE --

<table>
<tr>
<td data-th="Heading 1"></td>
<td data-th="Heading 2"></td>
<td data-th="Heading 3"></td>
<td data-th="Heading 4"></td>
<td data-th="Heading 5"></td>
</tr>
</table>
1
  • That's a great looking solution!
    – HamsteR
    Jan 1 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.