Невозможно сделать таблицу начальной загрузки меньше

Question

Нужна помощь с календарем событий.Существует две проблемы:

A) Невозможно уменьшить календарь.Б) Невозможно заставить таблицу реагировать на работу.

Я устал от использования высоты и ширины на столе, но в моем тесте никаких эффектов.

.captop {
  caption-side: top;
  padding: 0;
}

.month {
  padding: 1rem;
  background: #6e69f5;
  text-align: center;
}

.month ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.month .prev {
  float: left;
  padding-top: 10px;
}

.month .next {
  float: right;
  padding-top: 10px;
}

#calendar>tbody>tr>td {
  padding: 0;
}

#calendar .card,
#calendar .card-header {
  border: 0;
  border-radius: 0;
}

#calendar .active .card-header {
  background: #6e69f5;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col">
      <h2 class="section-heading text-uppercase text-center">Events</h2>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="table-responsive" id="calDiv">
        <table class="table table-bordered" id="calendar">
          <caption class="captop">
            <div class="month">
              <ul>
                <li class="next">❯</li>
                <li>October<br><span style="font-size:18px">2018</span></li>
              </ul>
            </div>
          </caption>
          <thead>
            <tr>
              <td>Sunday</td>
              <td>Monday</td>
              <td>Tuesday</td>
              <td>Wednesday</td>
              <td>Thursday</td>
              <td>Friday</td>
              <td>Saturday</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">0</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">1</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">2</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">3</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">4</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">5</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">6</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">7</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">8</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">9</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">10</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">11</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">12</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">13</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">14</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">15</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">16</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td class="active">
                <div class="card">
                  <div class="card-header text-right">17</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">18</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">19</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">20</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">21</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">22</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">23</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">24</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">25</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">26</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">27</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">28</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">29</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">30</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">31</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Код, предоставленный просто Bootstrap 4 и HTML.У меня есть код JavaScript, который генерирует HTML.Любая помощь будет оценена!

Answer 1

Макет таблицы по умолчанию - автоматический, поэтому исправьте его:

table {
  table-layout: fixed;
}

Answer 2

Уменьшая font-size и padding вместе с @media всех элементов вашего интерфейса, вы можете достичь этого:)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >

<style>
  .captop {
    caption-side: top;
    padding: 0;
  }
  .month {
    padding: 1rem;
    background: #6e69f5;
    text-align: center;
  }
  .month ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .month .prev {
    float: left;
    padding-top: 10px;
  }
  .month .next {
    float: right;
    padding-top: 10px;
  }
  #calendar>tbody>tr>td {
    padding: 0;
  }
  #calendar .card,
  #calendar .card-header {
    border: 0;
    border-radius: 0;
  }
  #calendar .active .card-header {
    background: #6e69f5;
  }
  
  
  @media (max-width: 768px) {
    #calendar .card {
      padding: 0;
    }
    .month,
    .table td, .table th,
    #calendar .card-header {
      padding: 4px;
    }
    .card-body {
      padding: 4px !important;
    }
    .month ul li,
    .table td, .table th,
    .h4.card-text.calendar-info {
      font-size: 10px;
    }
    .month ul li span {
      font-size: 10px !important;
    }
  }
</style>

<div class="container">
  <div class="row">
    <div class="col">
      <h2 class="section-heading text-uppercase text-center">Events</h2>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="table-responsive" id="calDiv">
        <table class="table table-bordered" id="calendar">
          <caption class="captop">
            <div class="month">
              <ul>
                <li class="next">❯</li>
                <li>October<br><span style="font-size:18px">2018</span></li>
              </ul>
            </div>
          </caption>
          <thead>
            <tr>
              <td>Sunday</td>
              <td>Monday</td>
              <td>Tuesday</td>
              <td>Wednesday</td>
              <td>Thursday</td>
              <td>Friday</td>
              <td>Saturday</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">0</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">1</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">2</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">3</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">4</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">5</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">6</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">7</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">8</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">9</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">10</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">11</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">12</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">13</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">14</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">15</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">16</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td class="active">
                <div class="card">
                  <div class="card-header text-right">17</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">18</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">19</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">20</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">21</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">22</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">23</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">24</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">25</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">26</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">27</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="card">
                  <div class="card-header text-right">28</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">29</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">30</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card">
                  <div class="card-header text-right">31</div>
                  <div class="card-body">
                    <p class="h4 card-text calendar-info">No Events</p>
                  </div>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 3

Для этого вы можете использовать правило CSS @Media.Ваш стол на самом деле уже отзывчив.Но поскольку размер шрифта остается неизменным, элемент div, который содержит его, не может уменьшиться, что делает вашу таблицу не реагирующей на представление размером менее 1000 пикселей.

Попробуйте это ..

<html>

<head>
  <style>
    @media(max-width:991px) {
      #calendar,
      div.card-body>p {
        font-size: smaller;
      }
      #calendar>tbody>tr>td>div>div {
        padding: 5px;
      }
    }
    
    @media(max-width:768px) {
      #calendar,
      div.card-body>p {
        font-size: x-small;
      }
      #calendar>tbody>tr>td>div>div {
        padding: 5px;
      }
    }
    
    @media(max-width:480px) {
      #calendar,
      div.card-body>p {
        font-size: xx-small;
      }
      #calendar>tbody>tr>td>div>div {
        padding: 3px;
      }
    }
    
    @media(max-width:440px) {
      #calendar,
      div.card-body>p {
        font-size: 7.5px;
      }
      #calendar,
      #calendar>tbody>tr>td>div>div {
        padding: 0;
      }
    }
     @media(max-width:390px) {
      #calendar,
      div.card-body>p {
        font-size: 6px;
      }
    }
    
    .captop {
      caption-side: top;
      padding: 0;
    }
    
    .month {
      padding: 1rem;
      background: #6e69f5;
      text-align: center;
    }
    
    .month ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .month ul li {
      color: white;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 3px;
    }
    
    .month .prev {
      float: left;
      padding-top: 10px;
    }
    
    .month .next {
      float: right;
      padding-top: 10px;
    }
    
    #calendar>tbody>tr>td {
      padding: 0;
    }
    
    #calendar .card,
    #calendar .card-header {
      border: 0;
      border-radius: 0;
    }
    
    #calendar .active .card-header {
      background: #6e69f5;
    }
  </style>
  <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
  <style type="text/css">
    .as-console-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-height: 150px;
      overflow-y: scroll;
      overflow-x: hidden;
      border-top: 1px solid #000;
      display: none;
    }
    
    .as-console {
      background: #e9e9e9;
      border: 1px solid #ccc;
      display: table;
      width: 100%;
      border-collapse: collapse;
    }
    
    .as-console-row {
      display: table-row;
      font-family: monospace;
      font-size: 13px;
    }
    
    .as-console-row:after {
      display: table-cell;
      padding: 3px 6px;
      color: rgba(0, 0, 0, .35);
      border: 1px solid #ccc;
      content: attr(data-date);
      vertical-align: top;
    }
    
    .as-console-row+.as-console-row>* {
      border: 1px solid #ccc;
    }
    
    .as-console-row-code {
      width: 100%;
      white-space: pre-wrap;
      padding: 3px 5px;
      display: table-cell;
      font-family: monospace;
      font-size: 13px;
      vertical-align: middle;
    }
    
    .as-console-error:before {
      content: 'Error: ';
      color: #f00;
    }
    
    .as-console-assert:before {
      content: 'Assertion failed: ';
      color: #f00;
    }
    
    .as-console-info:before {
      content: 'Info: ';
      color: #00f;
    }
    
    .as-console-warning:before {
      content: 'Warning: ';
      color: #e90
    }
    
    @-webkit-keyframes flash {
      0% {
        background: rgba(255, 240, 0, .25);
      }
      100% {
        background: none;
      }
    }
    
    @-moz-keyframes flash {
      0% {
        background: rgba(255, 240, 0, .25);
      }
      100% {
        background: none;
      }
    }
    
    @-ms-keyframes flash {
      0% {
        background: rgba(255, 240, 0, .25);
      }
      100% {
        background: none;
      }
    }
    
    @keyframes flash {
      0% {
        background: rgba(255, 240, 0, .25);
      }
      100% {
        background: none;
      }
    }
    
    .as-console-row-code,
    .as-console-row:after {
      -webkit-animation: flash 1s;
      -moz-animation: flash 1s;
      -ms-animation: flash 1s;
      animation: flash 1s;
    }
  </style>
</head>

<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <div class="container">
    <div class="row">
      <div class="col">
        <h2 class="section-heading text-uppercase text-center">Events</h2>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="table-responsive" id="calDiv">
          <table class="table table-bordered" id="calendar">
            <caption class="captop">
              <div class="month">
                <ul>
                  <li class="next">❯</li>
                  <li>October<br><span style="font-size:18px">2018</span></li>
                </ul>
              </div>
            </caption>
            <thead>
              <tr>
                <td>Sunday</td>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="card">
                    <div class="card-header text-right">0</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">1</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">2</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">3</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">4</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">5</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">6</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="card">
                    <div class="card-header text-right">7</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">8</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">9</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">10</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">11</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">12</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">13</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="card">
                    <div class="card-header text-right">14</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">15</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">16</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td class="active">
                  <div class="card">
                    <div class="card-header text-right">17</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">18</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">19</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">20</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="card">
                    <div class="card-header text-right">21</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">22</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">23</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">24</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">25</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">26</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">27</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="card">
                    <div class="card-header text-right">28</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">29</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">30</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="card">
                    <div class="card-header text-right">31</div>
                    <div class="card-body">
                      <p class="h4 card-text calendar-info">No Events</p>
                    </div>
                  </div>
                </td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  </script>

  <div class="as-console-wrapper">
    <div class="as-console"></div>
  </div>
</body>

</html>