<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table> <summary><strong>February</strong> 2014</summary> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tr> <td> <span class="date"> 27 <ul> <li> <span class="event">Bus Stop</span> <span class="time">4 pm</span> </li> </ul> </span> </td> <td> <span class="date">28</span> </td> <td> <span class="date">29</span> </td> <td> <span class="date">30</span> </td> <td> <span class="date">31</span> </td> <td class="weekend"> <span class="date">February 1</span> </td> <td class="weekend"> <span class="date"> 2 <ul> <li> <span class="event">Super Bowl</span> <span class="time">6:30 pm</span> </li> </ul> </span> </td> </tr> <tr class="previous-week"> <td> <span class="date">3</span> </td> <td> <span class="date">4</span> </td> <td> <span class="date">5</span> </td> <td> <span class="date">6</span> </td> <td> <span class="date">7</span> </td> <td class="weekend"> <span class="date">8</span> </td> <td class="weekend"> <span class="date">9</span> </td> </tr> <tr class="current-week"> <td> <span class="date">10</span> </td> <td> <span class="date">11</span> </td> <td> <span class="date">12</span> </td> <td> <span class="date">13</span> </td> <td class="current-day"> <span class="date"> 14 <ul> <li class="different-calendar"><span class="event">Valentines Day</span></li> </ul> </span> </td> <td class="weekend"> <span class="date">15</span> </td> <td class="weekend"> <span class="date">16</span> </td> </tr> <tr> <td> <span class="date">17</span> </td> <td> <span class="date">18</span> </td> <td> <span class="date">19</span> </td> <td> <span class="date">20</span> </td> <td> <span class="date">21</span> </td> <td class="weekend"> <span class="date">22</span> </td> <td class="weekend"> <span class="date">23</span> </td> </tr> <tr> <td> <span class="date">24</span> </td> <td> <span class="date"> 25 <ul> <li class="different-calendar"> <span class="event">Breakfast with Joe Smchoe The Baker Man</span> <span class="time">10 am</span> </li> <li> <span class="event">Code Review</span> <span class="time">Noon</span> </li> <li> <span class="event">Project X Kickoff</span> <span class="time">5 pm</span> </li> </ul> </span> </td> <td> <span class="date">26</span> </td> <td> <span class="date">27</span> </td> <td> <span class="date">28</span> </td> <td class="weekend"> <span class="date">March 1</span> </td> <td class="weekend"> <span class="date">2</span> </td> </tr> </table>

* { font-size: 100%; } *:before, *:after { box-sizing: border-box; } body { margin: 0.5em; } table { border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%; min-width: 800px; } @media (max-width: 800px) { table .time { display: none; } } summary { padding-bottom: 0.25em; font-size: 1.5em; font-weight: 100; text-align: right; } tr { position: relative; } th { text-align: right; color: #999; font-weight: normal; font-size: 0.85em; } td { width: 14.285714286%; } .date { text-align: right; display: block; height: 0; font-size: 0.8em; padding: 0.25em; padding-bottom: 73%; position: relative; border-bottom: 1px solid #dedbdb; margin-left: 0.25em; margin-right: 0.25em; } tr:first-child:not(.current-week) .date { border-top: 1px solid #dedbdb; } .date ul, .date li { margin: 0; padding: 0; list-style: none; color: #333; } .date ul { text-align: left; font-size: 0.9em; width: 100%; overflow: hidden; position: absolute; font-weight: normal; } .date li { color: #222; width: 100%; height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; } .date li:before { content: '\2022'; color: inherit; display: inline-block; padding-right: 0.25em; } .time { float: right; text-align: right; color: #999; } .event { color: #333; } .previous-week .date { border: none; } .current-week { border-top: 4px solid #fed6d7; } .current-day { background: #fed6d7; border-top: 4px solid #cb6c6b; } .current-day .date { font-weight: bold; color: #cb6c6b; } .weekend { background-clop: padding-box; background: #f5f5f5; } .date .different-calendar { color: #00c800; }