CodePen

HTML

            
                <table border="0" bgcolor="#eeeeee">
    <thead bgcolor="#000000" style="color: #fff">
      <tr>
        <th width="100"></th>
        <th width="81">Today</th>
        <th width="81">Sep 28</th>
        <th width="81">Oct 28</th>
        <th width="81">Nov 28</th>
        <th width="81">Dec 28</th>
        <th width="81">Jan 28</th>
        <th width="81">Feb 28</th>
        <th width="81">Mar 28</th>
        <th width="81">Apr 28</th>
        <th width="81">May 28</th>
        <th width="81">Jun 28</th>
      </tr>
    </thead>
    <tr>
      <th width="100">11 Payments</th>
      <td width="81">$27.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
      <td width="81">$18.00</td>
    </tr>

    <tr>
      <th width="100">9 Payments</th>
      <td>$32.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td>$20.00</td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <th width="100">6 Payments</th>
      <td>$40.00</td>
      <td>$22.00</td>
      <td>No Payment</td>
      <td>$22.00</td>
      <td>No Payment</td>
      <td>$22.00</td>
      <td>No Payment</td>
      <td>$22.00</td>
      <td>No Payment</td>
      <td>$18.00</td>
      <td></td>
    </tr>

    <tr>
      <th width="100">4 Payments</th>
      <td>$40.00</td>
      <td>No Payment</td>
      <td>$30.00</td>
      <td>No Payment</td>
      <td>$30.00</td>
      <td>No Payment</td>
      <td>$30.00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <th width="100">Paid in Full</th>
      <td colspan="11">$152.00 (saves up to $5.00 per month)</td>
    </tr>
  </table>
 
            
          
!

CSS

            
              /* Original */
table {
  font-size: .9em;
  font-family: Arial, sans-serif;
  border-collapse: collapse;
}
td, th {
  text-align: left;
  padding: 10px 5px;
  border: 1px solid #aaa;
}


/* RWD */

@media (max-width: 600px) {

/* make browsers include padding and border inside the width */
/* http://paulirish.com/2012/box-sizing-border-box-ftw/ */
/* http://html5please.com/#box-sizing */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* basic table styles and positioning */
table {
  width: 100%;
  float: left;
  border: 1px solid #aaa;
}


/* table cells get "display: block" and "float: left" */
th, td {
  display: block;
  float: left;
  text-align: center;
  border: 0;
  border-bottom: 1px solid #aaa;
}


/* the far left column will be full-width and called out */
th {
  width: 100%;
  background-color: #000;
  color: #fff;
}


/* each inner table cell will fit four-across (25%) */
td {
  width: 25%;
  min-height: 3em;
  border-right: 1px solid #aaa;
}


/* hide the header row */
thead {
  display: none;
}

/* the last option only has one inner cell, make it 100% */
tr:nth-child(5) td {
  width: 100%;
}

/* because the header row is dynamic and we need to see it for each row,
   we're going to use generated content to fake it */
td:before {
  display: block;
  font-weight: bold;
  margin-bottom: .25em;
}


/* the second column (or the first inner table cell) is the first payment */
td:nth-child(2):before {
  content: "Today";
}


/* each additional inner cell is for the following month's payment */
td:nth-child(3):before {
  content: "Month 2";
}
td:nth-child(4):before {
  content: "Month 3";
}
td:nth-child(5):before {
  content: "Month 4";
}
td:nth-child(6):before {
  content: "Month 5";
}
td:nth-child(7):before {
  content: "Month 6";
}
td:nth-child(8):before {
  content: "Month 7";
}
td:nth-child(9):before {
  content: "Month 8";
}
td:nth-child(10):before {
  content: "Month 9";
}
td:nth-child(11):before {
  content: "Month 10";
}
td:nth-child(12):before {
  content: "Month 11";
}


/* hide the empty cells at the end of each row */
tr:nth-child(2) td:nth-child(11),
tr:nth-child(2) td:nth-child(12),
tr:nth-child(3) td:nth-child(12),
tr:nth-child(4) td:nth-child(9),
tr:nth-child(4) td:nth-child(10),
tr:nth-child(4) td:nth-child(11),
tr:nth-child(4) td:nth-child(12) {
  display: none;
}

}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................