How to display tables on mobile using Bootstrap

Question

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

User · Answer

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.

User · Answer

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  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  quot row quot             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 --  lt table gt   lt tr gt   lt td data-th  quot Heading 1 quot  gt  lt  td gt   lt td data-th  quot Heading 2 quot  gt  lt  td gt   lt td data-th  quot Heading 3 quot  gt  lt  td gt   lt td data-th  quot Heading 4 quot  gt  lt  td gt   lt td data-th  quot Heading 5 quot  gt  lt  td gt   lt  tr gt   lt  table gt

User · Answer

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

User · Answer

Bootstrap 3 introduces responsive tables    lt div class  table-responsive  gt     lt table class  table  gt             lt  table gt   lt  div gt    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

[twitter-bootstrap] How to display tables on mobile using Bootstrap?

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3