无法使引导表更小

Posted 2023-03-05

【中文标题】无法使引导表更小

【英文标题】：Cannot Make Bootstrap Table Smaller

【发布时间】：2019-03-21 17:34:37

【问题描述】：

需要有关活动日历的帮助。有两个问题：

A) 无法缩小日历。 B) 无法响应工作表。

我厌倦了在桌子上使用高度和宽度，但在我的测试中没有效果。

.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。我确实有一个生成 html 的 javascript 代码。任何帮助将不胜感激！

【参考方案1】：

您可以为此使用 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>

【讨论】：

您可能还想在较小的屏幕上将一周中的日期转换（旋转）为垂直。

是的，听起来也很棒。你可以发布我猜的答案。无论如何感谢@Girisha C 的编辑，但差别不大，这就是我拒绝它的原因。

【参考方案2】：

通过减少 UI 中所有元素的 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>

【参考方案3】：

默认的表格布局是自动的，所以让它固定：

table 
  table-layout: fixed;