溢出 x：当外部 div 较小时自动不显示滚动

Question

当容器框非常小以显示 table 干净（space列之间足够，而不是行内的新行）。

我尝试了 CSS 属性 overflow: auto 但它不起作用。

在下面的代码片段中，容器框“main_card-table”的宽度固定为 400px，table 看起来不太好。所以我想要 table 在外部容器较小时看起来不错的可滚动。

这是一个片段：

* {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 100% = 16px */
}

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.5;
  color: #444;
  font-family: "Roboto", "Open Sans", sans-serif;
}

/* general table properties */

table {
    background-color: white;
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
}

tr {
    border-bottom: 1px solid #dde0e6;
}

th, td {
    padding: 4px 0; 
    text-align: left;
    vertical-align: top;
}

.main_card-table {
  width: 400px;
  grid-area: table;
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #d8dbe0;
}

.main_card-table-content {
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 16px 32px;
}

<!DOCTYPE html>
<html>
<head>
  <title>table-overflow</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <div class="main_card-table">
    <div class="main_card-table-content">
      <table class="card-table">
        <tr>
          <th>Property</th>
          <th>Min</th>
          <th>Max</th>
          <th>Avg</th>
        </tr>
        <tr>
          <td>Speed</td>
          <td><span id="speed-min">45</span>&nbsp;km/h</td>
          <td><span id="speed-max">42</span>&nbsp;km/h</td>
          <td><span id="speed-avg">73</span>&nbsp;km/h</td>
        </tr>
        <tr>
          <td>Humidity</td>
          <td><span id="humidity-min">54</span>&nbsp;%</td>
          <td><span id="humidity-max">34</span>&nbsp;%</td>
          <td><span id="humidity-avg">23</span>&nbsp;%</td>
        </tr>
        <tr>
          <td>Pressure</td>
          <td><span id="pressure-min">23</span>&nbsp;hPa</td>
          <td><span id="pressure-max">43</span>&nbsp;hPa</td>
          <td><span id="pressure-avg">23</span>&nbsp;hPa</td>
        </tr>
        <tr>
          <td>Current Truck Turnaround Time</td>
          <td><span id="current-truck-turnaround-time-min">34</span>&nbsp;min</td>
          <td><span id="current-truck-turnaround-time-max">34</span>&nbsp;min</td>
          <td><span id="current-truck-turnaround-time-avg">23</span>&nbsp;min</td>
        </tr>
        <tr>
          <td>Improved Truck Turnaround Time</td>
          <td><span id="improved-truck-turnaround-time-min">23</span>&nbsp;min</td>
          <td><span id="improved-truck-turnaround-time-max">23</span>&nbsp;min</td>
          <td><span id="improved-truck-turnaround-time-avg">32</span>&nbsp;min</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

Answer 1

min-width 当内容小于最小宽度时应用。因此，只需将此属性添加到 table，您的大小 400px 与 div 宽度相同。然后将 overflow-x 属性添加到 table 的父级，即 .main-card-table-content 在您的情况下。所以代码是

table{
  ...
  min-width: 400px;
}
.main-card-table-content{
  ...
  overflow-x: auo;
}

溢出 x：当外部 div 较小时自动不显示滚动

overflow x: auto doesn't dhow scroll when outer div is small

html

css

html-table

overflow