Mobile responsive table

Mobile Responsive Table

Header color will be changed in the CSS. The last final row color is changed in the HTML inline styles. 

HTML

Table with H2 Column Heads, H3 Row Titles, and highlighted last row. 

<table class="responsive-table">
    <thead>
    <tr>
        <th><h2>Type of Mortgage</h2></th>
        <th><h2>Traditional</h2></th>
        <th><h2>Traditional</h2></th>
      <th><h2>Designed To Prosper</h2></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><h3>Term/Payoff</h3></td>
    <td> 30 Year </td>
    <td> 15 Year </td>
    <td> 5 Years, 1 Month**</td>
    </tr>
    <tr>
    <td><h3>Mtg. Amount</h3></td>
    <td> $250,000 </td>
    <td> $250,000 </td>
    <td> $250,000</td>
  </tr>
      <tr>
    <td><h3>Interest Rate</h3></td>
    <td> 3.75% </td>
    <td> 3.25% </td>
    <td> 3.75% </td>
  </tr>
        <tr>
    <td><h3>Min. Payment</h3></td>
    <td> $1157 </td>
    <td> $1757 </td>
    <td> $781 Decreasing Quickly</td>
  </tr>
        <tr>
    <td><h3>Total Interest Paid</h3></td>
    <td> $166,804 </td>
    <td> $66,201 </td>
    <td> $25,010</td>
  </tr>
        <tr>
    <td><h3>Mtg. Bal. at 5 Yr. 1 Mo. </h3></td>
    <td> $224,284 </td>
    <td> $177,225 </td>
    <td> $0</td>
  </tr>
        <tr>
    <td><h3>Saved Payments</h3></td>
    <td> $345,943 </td>
    <td> $209,083 </td>
          <td>-</td>
  </tr>
        <tr style="background-color: #FF0000; color: white!important;">
    <td><h3 style="color: white;">Interest Saved</h3></td>
    <td> $141,794 </td>
    <td> $41,191 </td>
        <td>Using Designed to Prosper</td>
    </tr>
    </tbody>
</table>

CSS

Update the color variables for the Headers at the top. On mobile, the final rows will need to be updated to reflect the column titles and the amount of columns in the table. 

@header-background: #68BF3F;
@header-text: #f1f1f1;

// Generic Styling, for Desktops/Laptops 
table { 
  width: 100%; 
}
tr:nth-of-type(odd) { background: #eee;  }
th { 
  background: @header-background; 
  font-weight: bold; 
}
td, th { 
  padding: .3em; 
  text-align: left; 
}

// Mobile
@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-bottom: 1px solid #ccc; margin-left: -20px; margin-right: -20px; }

  // Behave  like a "row"
  td {  
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 60%;  }
    
// Now like a table header
  td:before { 
        position: absolute;
        top: 10px;
        left: 10px;
        width: 50%; 
        padding-right: 10px; 
        padding-left: 10px;
        white-space: nowrap;
    }
  
//  Add In Header Labels & Styles to New Table (Copy & Paste to Add New Column Titles on Mobile - Don't forget to change the nth type')
    td:nth-of-type(1):before { content: "1st Column Title"; background: @header-background; color: @header-text; font-size: 24px; }
    td:nth-of-type(2):before { content: "2nd Column Title"; background: @header-background; color: @header-text; font-size: 24px; }
    td:nth-of-type(3):before { content: "3rd Column Title"; background: @header-background; color: @header-text; font-size: 24px;}
    td:nth-of-type(4):before { content: "4th Column Title"; background: @header-background; color: @header-text; font-size: 24px;}
}