如何在父 div 中放置表格内容？

Question

我正在尝试将我的表格放入一个 div 容器中，但无论我做什么，要么它溢出，要么某些内容从显示中被截断。

如何使表格的全部内容适合 div 并使其可滚动？

这是我目前的状态：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

.max-width {
  padding: 0 80px;
  margin: auto;
}

.navbar {
  position: fixed;
  width: 100%;
  padding: 30px 0;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: #00b188;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}

.navbar .logo a span {
  color: #00b188;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  color: #00b188;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

.navbar .menu li a.active {
  color: #00b188;
}

.navbar.sticky .menu li a.active {
  background-color: #007188;
  color: #fff;
}

.menu-btn {
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  display: none;
}

.page {
  z-index: -1;
  display: grid;
  place-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  font-family: 'Ubuntu', sans-serif;
  background: url("../images/technology.jpg") no-repeat center;
}

.page .max-width {
  margin: auto 0 auto 40px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: center;
  height: 80vh;
  padding: 25px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 1px 1px 3px black;
}

.table-container {
    width: 100%;
    height: 80vh;
    overflow: auto;
    padding: 50px;
}

.vm-table {
    height: 100%;
}

@media (max-width: 1359px) {
  .navbar .logo a {
    font-size: 30px;
  }

  .menu-btn {
      display: block;
      z-index: 999;
  }

  .menu-btn i.active:before {
      content: "\f00d";
  }

  .navbar .menu {
      position: fixed;
      height: 100vh;
      width: 100%;
      left: -100%;
      top: 0;
      background: #111;
      text-align: center;
      padding-top: 80px;
      transition: all 0.3s ease;
  }

  .navbar .menu.active {
      left: 0;
  }

  .navbar .menu li {
      display: block;
  }

  .navbar .menu li a {
      display: inline-block;
      margin: 20px 0;
      font-size: 25px;
  }
}

@media (max-width: 1104px) {
  .navbar .logo a {
    font-size: 25px;
  }

  .page .max-width {
      margin-left: 0px;
  }
}

@media (max-width: 991px) {
  .max-width {
      padding: 0 50px;
  }

  .navbar .logo a {
    font-size: 20px;
  }
}

@media (max-width: 690px) {
  .max-width {
      padding: 0 23px;
  }

  .navbar .logo a {
    font-size: 18px;
  }
}

@media (max-width: 500px) {
  .navbar .logo a {
    font-size: 15px;
  }
}

<nav class="navbar">
  <div class="max-width">
    <div class="logo">
      <a href="{% url 'home' %}">My <span>Application</span></a>
    </div>
    <ul class="menu">
      {% for item in navbar.elements %}
      <li>
        <a
          href="{% url item.urlname %}"
          class="{% if navbar.activeItem == item.name %}active{% endif %}"
          >{{ item.name }}</a
        >
      </li>
      {% endfor %} {% if user.is_superuser %}
      <li><a href="{% url 'admin' %}">Admin page</a></li>
      {% endif %} {% if user.is_authenticated %}
      <li><a href="{% url 'logout' %}">Logout</a></li>
      {% else %}
      <li><a href="{% url 'login' %}">Login</a></li>
      {% endif %}
    </ul>
    <div class="menu-btn">
      <i class="fas fa-bars"></i>
    </div>
  </div>
</nav>
<div class="page">
  <div class="max-width">
    <div class="content">
        <div clas="table-container">
            <table class="vm-table" border="1">
                <thead class="vm-table-head">
                    <th class="vm-th">Request ID</th>
                    <th class="vm-th">Instance Name</th>
                    <th class="vm-th">Template</th>
                    <th class="vm-th">IP Address</th>
                    <th class="vm-th">Owner</th>
                    <th class="vm-th">Created</th>
                </thead>
                <tbody>
                {% for vm in virtual_machines %}
                    <tr class="vm-tr">
                        <td class="vm-td">{{ vm.request_id }}</td>
                        <td class="vm-td">vm_mkt_{{ vm.request_id }}_{{ vm.request_id.username }}</td>
                        <td class="vm-td">{{ vm.product_id.realname }}</td>
                        <td class="vm-td">{{ vm.ip }}</td>
                        <td class="vm-td">{{ vm.request_id.username }}</td>
                        <td class="vm-td">{{ vm.created }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
  </div>
</div>

如何使我的表格适合带有“内容”类的 div？

Answer 1

.page {
  z-index: -1;
  display: grid;
  place-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  font-family: 'Ubuntu', sans-serif;
  background: url("../images/technology.jpg") no-repeat center;
}

.page .max-width {
    margin: auto 0;
    padding: 0px 20px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: center;
  height: 80vh;
  padding: 25px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 1px 1px 3px black;
}

.table-container {
    width: 100%;
    height: 80vh;
    overflow: auto;
    padding: 50px;
}

.vm-table {
    height: 100%;
}

<div class="page">
      <div class="max-width">
        <div class="content">
            <div clas="table-container">
                <table class="vm-table" border="1">
                    <thead class="vm-table-head">
                        <th class="vm-th">Request ID</th>
                        <th class="vm-th">Instance Name</th>
                        <th class="vm-th">Template</th>
                        <th class="vm-th">IP Address</th>
                        <th class="vm-th">Owner</th>
                        <th class="vm-th">Created</th>
                    </thead>
                   <tbody>
                       {% for vm in virtual_machines %}
                       <tr class="vm-tr">
                           <td class="vm-td">{{ vm.request_id }}</td>
                           <td class="vm-td">vm_mkt_{{ vm.request_id }}_{{ vm.request_id.username }}</td>
                           <td class="vm-td">{{ vm.product_id.realname }}</td>
                           <td class="vm-td">{{ vm.ip }}</td>
                           <td class="vm-td">{{ vm.request_id.username }}</td>
                           <td class="vm-td">{{ vm.created }}</td>
                       </tr>
                       {% endfor %}
                   </tbody>
               </table>
           </div>
        </div>
    </div>
</div>

.page .max-width {
    margin: auto 0;
    padding: 0px 20px;
}