无法使引导表更小

【问题标题】：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 代码。任何帮助将不胜感激！

【问题讨论】：

    标签： html css responsive-design bootstrap-4 responsive


    【解决方案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;
}

      【讨论】：

        猜你喜欢
        • 2021-11-12
        • 1970-01-01
        • 2021-11-25
        • 2018-03-29
        • 2016-02-19
        • 1970-01-01
        • 1970-01-01
        • 2021-08-02
        • 2020-11-30
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode