Responsive Calendar

<table id="header-table">
    <tbody>
<tr>
<th>Month 2017</th>
</tr>
    </tbody>
  </table>
  <table id="day-names">
    <tbody>
      <tr>
        <td>Sunday</td>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
      </tr>
    </tbody>
  </table>
  <table class="week">
    <tr>
      <td class="date today">30</td>
      <td class="date today">1</td>
      <td class="date today">2</td>
      <td class="date today">3</td>
      <td class="date today">4</td>
      <td class="event holiday">5</td>
      <td class="date today">6</td>
    </tr>
    <tr>
      <td class="date today">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Open Registration <a href="#r">Register</a></td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">7</td>
      <td class="event important">8</td>
      <td class="date today">9</td>
      <td class="date today">10</td>
      <td class="date today">11</td>
      <td class="date today">12</td>
      <td class="date today">13</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td class="description">[extra href="#special" title="NOTES" info="popover" info_place="right" info_trigger="hover" info_content="This class teaches students the basic fundamentals of air conditioning and heatin systems and their core components." ]Notes[/extra]</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">14</td>
      <td class="event important">15</td>
      <td class="date today">16</td>
      <td class="date today">17</td>
      <td class="date today">18</td>
      <td class="event holiday">19</td>
      <td class="date today">20</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td class="description">[extra href="#special" title="Notes" info="popover" info_place="right" info_trigger="hover" info_content="This class teaches students the basic fundamentals of air conditioning and heatin systems and their core components." ]Notes[/extra]</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="description">Forms Deadline</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">21</td>
      <td class="date today">22</td>
      <td class="date today">23</td>
      <td class="date today">24</td>
      <td class="date today">25</td>
      <td class="date today">26</td>
      <td class="date today">27</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="date today">28</td>
      <td class="date today">29</td>
      <td class="date today">30</td>
      <td class="date today">31</td>
      <td class="date today">1</td>
      <td class="date today">2</td>
      <td class="date today">3</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="date today">&nbsp;</td>
      <td class="date today">&nbsp;</td>
      <td class="date today">&nbsp;</td>
    </tr>
  </table>

/* CALENDAR
   ================================================== */

table {
  width: 100%;
  font-size: 14px;
  border-left: 1px solid #d6d6d6;
  margin-bottom:2px;
}

th {
    border-bottom: 1px solid #000;
    padding: 22px;
    font-weight: 400;
    font-size: 18px;
    font-weight: 700;
    text-align: center !important;
    background-color: #000;
    color: #fff;
    white-space: nowrap;
}

td {
  border-right: 1px solid #d6d6d6;
}

#header-table tr:first-child {
  background-color: #000;
  text-align: center;
  color: #fff;
  border-top: 1px solid #000;
}

#header-table tr:nth-child(2) {
  background-color: #D31145;
  color: white;
  border: 1px solid #D31145;
}

#header-table td {
  padding: 4px;
}

#day-names {
  text-align: center;
  border-bottom: 1px solid #d6d6d6;
}

#day-names td {
  width: 14.2857%;
  height: 22px;
}

table.week {
  font-size: 75%;
}

table.week {
  height: 80px;
  border-bottom: 1px solid #d6d6d6; 
}

table.week td {
  width: 14.2857%;
  padding: 2px 3px;
}

td.today {
  font-weight: normal;
  background-color: #F0F0F0;
}

td.today.date {
  font-size: 110%;
}

table.week tr:first-child {
  height: 25%;
}

table.week tr:nth-child(2) {
  height: 75%;
}

.event.holiday {
  background-color: #D1F2EB;
}

td.event.important {
  background-color: #1BBC9B;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}