Responsive Table

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.0/css/theme.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.0/js/jquery.tablesorter.js"></script>
            <table class="res-tbl supp">

<tr>
<th>Statement number</th>
<th>Service date</th>
<th>Patient</th>
<th>Provider</th>
<th>Claim number</th>
<th>Statement date</th>
</tr>
<tbody>
            <tr>

              <td data-th="Statement number"><a href=""><div class="fa fa-file-pdf-o pdf_icon"></div>&nbsp;000000004</a></td>
              <td data-th="Service date">9/29/2016</td>
              <td data-th="Patient">Nate</td>
              <td data-th="Provider">Walgreens #5969 HYDRO3</td>
              <td data-th="Claim number">500000503</td>
              <td data-th="Statement date">9/29/2016 <span class="show_hide fa fa-plus-circle"></span></td>
            </tr>

            <tr class="display: table-row;">
            
<td class="slidingEl" colspan="6">
                    <dl class="dl-horizontal">
                        <dt>Examiner</dt>
                        <dd>IP, Sikyin / 69776 / 1742</dd>
                        <dt>SPE (multiple)</dt>
                        <dd>John Olaskey</dd>
                        <dt>Applicants</dt>
                        <dd>Roman Amirpur</dd>
                        <dt>Inventors</dt>
                        <dd>Disney Dale</dd>
                        <dt>Law firm</dt>
                        <dd>Clayton &amp; Clayton Associates</dd>
                    </dl>
                </td>
                </tr>
                
            <tr>

              <td data-th="Statement number"><a...

CSS

table { margin: 10px; }
dl { display: block;}
td, th { border: solid 1px #000; padding: 10px; }

/* .dl-wrap {display: none; } */
.dl-horizontal { background: pink; }

@media only screen and (max-width: 480px) {

  /*.res-tbl { min-width: 300px; }*/

  .res-tbl thead, .res-tbl th { display: none; } /*--gs--*/
  .res-tbl td { display: block; } /*--gs--*/
  .res-tbl td span { display: block; margin-left: 50%; } /*--gs--*/
  
  .res-tbl td:first-child { padding-top: .5em; border-top: solid 1px #dddddd; } /*--gs--*/
  .res-tbl td:last-child { padding-bottom: .5em; text-align: left; } /*--gs--*/

  .res-tbl td:before { /*--gs--*/
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 50%;
    display: inline-block;
    text-align: left;
  }

  .res-tbl th, .res-tbl td { text-align: left; border-top: none; } /*--gs--*/
  .res-tbl tr { display: block; margin-bottom: 10px; } /*--gs--*/

  .res-tbl tr:nth-child(odd) { background: #ffffff; } /*--gs--*/

  .res-tbl tr::after { /*--gs--*/
    /*content: "\A";*/
    white-space: pre;
  }

  .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom: 1px; }
  .tablesorter-bootstrap > tbody > tr > td:first-child { background: #eeeeee; }
  
  }

JavaScript

$(document).ready(function(){
  $(".slidingEl").hide();

$(".show_hide").toggle("fa-minus-circle").show();
$(".show_hide").toggle(
      function(){
          $(".slidingEl").slideDown();
          $(".show_hide").addClass("fa-minus-circle");
          $(".show_hide").removeClass("fa-plus-circle");
          alert('show');
      },
      function(){
          $(".slidingEl").slideUp();
          $(".show_hide").addClass("fa-plus-circle");
          $(".show_hide").removeClass("fa-minus-circle");
      }
  );
});