title: Bootstrap table mobile responsive
body: <p>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.</p>
  
  <p>My example table:</p>
  
  <pre><code>    &lt;div class="col-lg-12"&gt;
      &lt;table id="example" class="table table-bordered table-striped table-responsive"&gt; 
          &lt;thead&gt; 
              &lt;tr&gt; 
                  &lt;th&gt;Pay&lt;/th&gt; 
                  &lt;th&gt;Print&lt;/th&gt; 
                  &lt;th&gt;Year&lt;/th&gt; 
                  &lt;th&gt;Property Id&lt;/th&gt; 
                  &lt;th&gt;Name/Location&lt;/th&gt; 
                  &lt;th&gt;Status&lt;/th&gt; 
                  &lt;th&gt;Amount Paid&lt;/th&gt; 
                  &lt;th&gt;Date Paid&lt;/th&gt; 
                  &lt;th&gt;Due&lt;/th&gt; 
                  &lt;th&gt;Pin&lt;/th&gt; 
                  &lt;th&gt;Box&lt;/th&gt;
              &lt;/tr&gt; 
          &lt;/thead&gt; 
          &lt;tbody&gt; 
              &lt;tr&gt;
                   &lt;th scope="row"&gt;1&lt;/th&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;&lt;button class="btn btn-warning btn-xs"&gt;Print Bill&lt;/button&gt;&lt;br&gt;&lt;button class="btn btn-warning btn-xs"&gt;Print Receipt&lt;/button&gt;&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt;
             &lt;/tr&gt; 
             &lt;tr&gt; 
                  &lt;th scope="row"&gt;2&lt;/th&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;&lt;button class="btn btn-warning btn-xs"&gt;Print Bill&lt;/button&gt;&lt;br&gt;&lt;button class="btn btn-warning btn-xs"&gt;Print Receipt&lt;/button&gt;&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt;
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
             &lt;/tr&gt; 
             &lt;tr&gt; 
                  &lt;th scope="row"&gt;3&lt;/th&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;&lt;button class="btn btn-warning btn-xs"&gt;Print Bill&lt;/button&gt;&lt;br&gt;&lt;button class="btn btn-warning btn-xs"&gt;Print Receipt&lt;/button&gt;&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt; 
                      &lt;td&gt;Table cell&lt;/td&gt;
             &lt;/tr&gt; 
          &lt;/tbody&gt; 
      &lt;/table&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried using table-responsive as a class. Using datatables and using the responsive function...</p>
  
  <pre><code>$(document).ready(function() {
            $('#example').DataTable( {
                responsive: true,
            } );
        } );
  </code></pre>
  
  <p>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!</p>