Detail Table

Detail Table.markdown

Detail Table

A Pen by Kyle Thomson on CodePen.

License.

index.html

<table class="terms">
  <thead>
    <tr>
      <th></th>
      <th>
        30 Days<sup>1</sup>
      </th>
      <th>
        90 Days<sup>1</sup>
      </th>
      <th>
        365 Days<sup>1</sup>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <caption>
    ALL FOR USE IN OZ
  </caption>
  <tbody>
    <tr>
      <th>
        <span>CALLS</span>
        <span class="desc">Standard Calls</span>
      </th>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
    </tr>
    <tr>
      <th>
        <span>TEXT</span>
        <span class="desc">SMS &amp; MMS</span>
      </th>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
    </tr>
    <tr>
      <th>
        <span>DATA<sup>2</sup></span>
        <span class="desc">Data per 30 days</span>
      </th>
      <td>3GB</td>
      <td>3GB</td>
      <td class="special">
        <st>3GB</st>
        <div>
          <span class="limited">LIMITED TIME*</span>
          <span class="value">4GB</span>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>
        <span class="price">$29<sup>.95</sup></span>
      </td>
      <td>
        <span class="price">$79<sup>.95</sup></span>
        <div class="pm"><span class="works2be">works out to be</span>$26<sup>.65</sup> <span class="lighter">/30 days<sup>*</sup></span></div>
      </td>
      <td>
        <span class="price">$299<sup>.95</sup></span>
        <div class="pm"><span class="works2be">works out to be</span>$24<sup>.66</sup> <span class="lighter">/30 days<sup>*</sup></span></div>
      </td>
    </tr>
  </tfoot>
</table>

<table class="terms four">
  <thead>
    <tr>
      <th></th>
      <th>
        30 Days<sup>1</sup>
      </th>
      <th>
        90 Days<sup>1</sup>
      </th>
      <th>
        365 Days<sup>1</sup>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <caption>
    ALL FOR USE IN OZ
  </caption>
  <tbody>
    <tr>
      <th>
        <span>CALLS</span>
        <span class="desc">Standard Calls</span>
      </th>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
    </tr>
    <tr>
      <th>
        <span>TEXT</span>
        <span class="desc">SMS &amp; MMS</span>
      </th>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
      <td>UNLIMITED</td>
    </tr>
    <tr>
      <th>
        <span>DATA<sup>2</sup></span>
        <span class="desc">Data per 30 days</span>
      </th>
      <td class="special">
        <st>5GB</st>
        <div>
          <span class="limited">LIMITED TIME*</span>
          <span class="value">6GB</span>
        </div>
      </td>
      <td class="special">
        <st>5GB</st>
        <div>
          <span class="limited">LIMITED TIME*</span>
          <span class="value">6GB</span>
        </div>
      </td>
      <td class="special">
        <st>5GB</st>
        <div>
          <span class="limited">LIMITED TIME*</span>
          <span class="value">7GB</span>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>
        <span class="price">$36<sup>.95</sup></span>
      </td>
      <td>
        <span class="price">$99<sup>.95</sup></span>
        <div class="pm"><span class="works2be">works out to be</span>$33<sup>.32</sup> <span class="lighter">/30 days*</span></div>
      </td>
      <td>
        <span class="price">$369<sup>.95</sup></span>
        <div class="pm"><span class="works2be light">works out to be</span>$30<sup>.41</sup> <span class="lighter">/30 days*</span></div>
      </td>
    </tr>
  </tfoot>
</table>

<span style="
    text-align: center;
    margin-top: 1em;
    display: block;
    background: #39A284;
    color: #fff;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    padding: .5%;
    "><strong>PLEASE NOTE:</strong> Bonus data upgrades will be automatically applied to your account <strong>after</strong> you purchase your plan.</span>

style.css

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
html,
body {
  background: #f6f6f6;
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table.terms {
  margin: 50px auto;
  color: #fff;
  width: auto;
  border-spacing: 2px;
  border-collapse: separate;
  font-size: 1.2em;
  font-weight: 400;
  position: relative;
}

em {
  font-weight: bold;
  font-style: normal
}

.lighter {
  font-weight: 300;
  font-size: 0.7em;
}

table.terms tbody th {
  width: 210px;
}

table.terms td {
  width: 180px;
  font-weight: bold;
  padding: 0;
  position: relative;
}

table.terms th,
table.terms td {
  vertical-align: middle;
}

table.terms tr td sup {
  font-weight: 400;
  padding: 2px;
  font-size: .6em;
}

table.terms thead th {
  background: #5398D3;
  line-height: 1.3em;
  text-transform: uppercase;
}

table.terms tbody th:nth-child(1) {
  background: #ECECEC;
  color: #333;
}

table.terms tbody th {
  text-align: left;
  padding: 10px;
}

table.terms tbody tr {
  background: #77818A;
}

table.terms tfoot td {
  background: #414143;
  font-family: 'Montserrat';
  font-weight: 400;
  line-height: 2em;
  padding-top: 20px;
  vertical-align: top;
}

table.terms tfoot td:nth-child(1),
table.terms thead th:nth-child(1) {
  background: none;
}

table.terms tbody .special st {
  display: block;
}

table.terms tbody .special st::after {
  position: absolute;
  display: block;
  content: '';
  top: 56%;
  left: 30%;
  width: 68px;
  height: .15em;
  border-radius: 1em;
  background-color: #ed193a;
  transform-origin: 0% 0%;
  transform: rotateZ(-6deg);
  opacity: .6
}

table.terms tbody .special div {
  width: 50%;
  background: #ed193a;
  height: 65%;
  position: absolute;
  bottom: 10%;
  right: -20%;
  border-radius: 0 7px 7px 7px;
  box-shadow: 3px 1px 2px rgba(0, 0, 0, 0.25);
}

table.terms tbody .special span.limited {
  display: block;
  border-radius: 0 7px 0 0;
  font-size: 0.55em;
  line-height: 1.4em
}

table.terms tbody .special span.value {
  font-size: 1.2em;
  line-height: 1.2em
}

table.terms tr {
  text-align: center;
  height: 75px;
}

table.terms th:nth-child(1) span.desc {
  display: block;
  font-weight: lighter;
}

table.terms span.desc {
  font-size: 0.75em;
}

.price {
  font-weight: 400;
  font-size: 1.5em;
  font-family: 'Montserrat';
}

table.terms span.works2be {
  font-size: .5em;
  line-height: 1em;
  padding: 0;
  display: block;
  position: relative;
  text-align: center;
  top: 4px
}

table.terms div.pm {
  position: relative;
  display: block;
  background: #77818A;
  margin-top: 10px;
  line-height: 1.6em;
  font-size: .9em;
  width: 100%;
  bottom: 0;
}

table.terms div.pm:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 10px solid #77818A;
  border-left: 10px solid #414143;
  width: 0;
}

table.terms sup {
  vertical-align: super;
}

table.terms button {
  color: rgb(255, 255, 255);
  background: transparent;
  font-size: 16px;
  line-height: 45px;
  height: 45px;
  font-style: normal;
  font-weight: 400;
  -webkit-border-radius: 0px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 25px;
  border: 1px solid #fff;
  display: inline-block;
  margin-top: 20px;
  transition: 0.5s all cubic-bezier(0.39, 0.1, 0, 0.99);
  cursor: pointer;
}

table.terms button:hover {
  background: rgba(255, 255, 255, 0.5);
}
/* 4gb table */

table.four #mm {
  position: absolute;
  width: 110px;
  top: -40px;
  right: -60px;
}

table.four thead th {
  background: #7A75B7;
}

table.terms caption {
  background: #40A281;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 230px;
  margin: 107px -127px;
  position: absolute;
  color: #293037;
  font-weight: 400;
  font-size: 0.65em;
  line-height: 1.4em;
  font-family: 'Montserrat';
  word-spacing: 3px;
}

@media only screen and (max-width: 700px) {
  table.terms {
    font-size: 0.75em;
    line-height: 1em;
  }
  table.terms .price {
    font-size: 1.5em
  }
  table.terms tr {
    height: 50px;
  }
  table.terms tfoot tr td {
    padding-top: 10px;
  }
  table.terms table.terms .price,
  table.terms sub,
  .special span {
    display: block;
  }
  table.terms div.pm span {
    display: block;
    line-height: 1em;
  }
  table.terms div.pm:before {
    border-bottom: 5px;
    border-left: 5px
  }
  table.terms tbody tr:nth-child(-n+2) td:nth-child(n-2) {
    transform: rotate(-20deg);
  }
  table.terms caption {
    width: 220px;
    margin: 106px -118px;
  }
  table.four #mm {
    width: 50px;
    top: -30px;
    right: -5px;
  }
}
/*HIDE LIMITED TIME OFFER*/

/*st::after,
.special div {
  visibility: hidden;
}*/