Bootstrap table mobile responsive

Question

I have a bootstrap table that I am trying to make more "mobile friendly." Everything I have tried looks pathetic. I am curious of what most people do really make there tables look good on a mobile device but open up normal on a computer or tablet.

My example table:

    <div class="col-lg-12">
    <table id="example" class="table table-bordered table-striped table-responsive"> 
        <thead> 
            <tr> 
                <th>Pay</th> 
                <th>Print</th> 
                <th>Year</th> 
                <th>Property Id</th> 
                <th>Name/Location</th> 
                <th>Status</th> 
                <th>Amount Paid</th> 
                <th>Date Paid</th> 
                <th>Due</th> 
                <th>Pin</th> 
                <th>Box</th>
            </tr> 
        </thead> 
        <tbody> 
            <tr>
                 <th scope="row">1</th> 
                    <td>Table cell</td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td>
           </tr> 
           <tr> 
                <th scope="row">2</th> 
                    <td>Table cell</td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td>
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
           </tr> 
           <tr> 
                <th scope="row">3</th> 
                    <td>Table cell</td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td> 
                    <td>Table cell</td>
           </tr> 
        </tbody> 
    </table> 
</div>

I have tried using table-responsive as a class. Using datatables and using the responsive function...

$(document).ready(function() {
          $('#example').DataTable( {
              responsive: true,
          } );
      } );

None of them add a scroll bar even to make it easier for the user. Im just curious for examples of what others are doing maybe collapsing rows underneath each other for phones or what? Any help on this would be greatly appreciated!

Answer 1

Solution 1: Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="table-responsive"> 
  <table class="table table-bordered"> 
    <thead> 
      <tr>
          <th>#</th>
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
          <th>Table heading</th> 
       </tr> 
    </thead> 
    <tbody> 
          <tr> 
            <th scope="row">1</th> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
          </tr> 
          <tr> 
            <th scope="row">2</th> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
          </tr> 
          <tr> 
            <th scope="row">3</th> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
            <td>Table cell</td> 
          </tr> 
        </tbody> 
       </table> 
     </div>
</div>

JS FIDDLE https://jsfiddle.net/klakshman318/tszegun6/

Solution 2:

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

JS FIDDLE https://jsfiddle.net/klakshman318/5u3a2snh/2/

Answer 2

Maybe try do table through flex-box!?

<div class="table">
    <div class="col">COL</div>
    <div class="col">COL</div>
    <div class="col">COL</div>
    <div class="col">COL</div>
</div>

.table {
      display: flex;
    }

    .table .col {
      width: 25%;
    }

    @media screen and (max-width: 786px) {
      .table {
        flex-wrap: wrap;
      }
      .table .col {
        width: 50%;
      }
    }

Live JsFiddle - https://jsfiddle.net/grinmax_/avav3dLs/