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?

ganders
  • 7,285
  • 17
  • 66
  • 114
  • 2
    I noticed that Bootstrap 3.0 is going to be "mobile first." Does anyone think they will resolve this "issue" of mobile tables? –  Feb 13 '13 at 03:51
  • Tables still seem to be the same in Bootstrap 3. :( – Giles Roberts Aug 23 '13 at 13:27
  • 1
    @GilesRoberts [If by "the same in Bootstrap 3" you mean "now responsive in Bootstrap 3" then yes, they're the same](http://getbootstrap.com/css/#tables-responsive). – ta.speot.is Oct 04 '13 at 05:54
  • @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. – Giles Roberts Oct 05 '13 at 07: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. – Giles Roberts Oct 05 '13 at 07:59

4 Answers4

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

ta.speot.is
  • 26,914
  • 8
  • 68
  • 96
  • 6
    Thank you. Like 99.9% of people, I didn't bother to read the documentation of the update. I guess I should have. – David Bélanger Nov 04 '13 at 00: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 ! – David Bélanger Nov 04 '13 at 01: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](http://getbootstrap.com/css/#tables-responsive)). – Dennis Mar 07 '14 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. ``), instead of wrapping the table in `.table-responsive`, which you even pointed out in your example.
     – Dennis Mar 08 '14 at 22:48
  • Question, before I implemented the above change, all of my columns and data were squished together. Now WITH this change, it's the same, just with the added border around. I did like the example shows, wrap the table with a div that has the class .table-responsive....(Note, the columns don'y overlap, only the column headers are squished to where they are unreadable. Maybe I'll update the above fiddle...) – ganders Aug 01 '14 at 17:12
  • Of course the fiddle that I create works just fine...let me get my "real" code and try it with that... – ganders Aug 01 '14 at 17:18
  • @ta.speot.is does this behave differently in bootstrap 3.0 vs 3.2? I'm running the first version of bootstrap on my site. When I copy and paste the code into my fiddle, it works over there...http://www.bootply.com/ROycPT7OhH – ganders Aug 04 '14 at 16:26
  • FYI - I got my issue fixed because I was directly overriding some table attributes on a couple of my pages. Removing that and it works perfect. – ganders Aug 14 '14 at 12:46
  • i dont see any difference... maybe the table is 100% width but td stay the same and thus if you have 3 td that would stay in one line istead of aligning one above another when in mobile. – Sagive Aug 19 '14 at 21:05
  • Bootstrap doesn't support Opera Mini http://getbootstrap.com/getting-started/#support – ta.speot.is May 17 '16 at 10:27
  • This behavior sucks, cant you collapse some columns or something, when i read responsive, i expect something without a horizontal scrollbar – PirateApp Dec 31 '17 at 13:43
  • 1
    @PirateApp Use `hidden-*` on the `td`s of the columns you want to hide https://getbootstrap.com/docs/3.3/css/#responsive-utilities – ta.speot.is Jan 01 '18 at 02:25
  • @PirateApp The default behavior is no scrollbars, but will then break your layout on mobile if the min width of the table is bigger than the users screen of course. This responsive class, allows the rest of your layout to work fine, and then the user can simply swipe left to see the rest of the table on mobile. Responsive just means responds to your device size which it is doing. While images can shrink and still be viewable, no way to shrink a table with many columns, other than maybe setting the font to an unreadable 1px. – TechRemarker Feb 08 '18 at 23:41
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.

Chords
  • 6,720
  • 2
  • 39
  • 61
  • 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 '13 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 07 '14 at 21:24
  • Agreed, but for now: https://web.archive.org/web/20130725223053/http://elvery.net/demo/responsive-tables – Chords Mar 07 '14 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 '15 at 09: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?

Community
  • 1
  • 1
Matt Busche
  • 14,216
  • 5
  • 36
  • 61
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>
santosh kumar
  • 31
  • 4