溢出 x：当外部 div 很小时，自动不显示滚动
Posted
技术标签:
【中文标题】溢出 x：当外部 div 很小时，自动不显示滚动【英文标题】：overflow x: auto doesn't dhow scroll when outer div is small 【发布时间】：2021-07-24 01:05:03 【问题描述】：当容器框的大小非常小时以显示表格干净（列之间有足够的空间而不是行内的新行）时，我正在尝试使表格在 div 内可滚动。
我尝试了 CSS 属性 overflow: auto 但它不起作用。
在下面的代码sn-p中，容器框“main_card-table”的宽度固定为400px，表格看起来不是很好。所以我想要在外部容器的大小很小时看起来不错的可滚动表格。
这是一个 sn-p：
*
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> km/h</td>
<td><span id="speed-max">42</span> km/h</td>
<td><span id="speed-avg">73</span> km/h</td>
</tr>
<tr>
<td>Humidity</td>
<td><span id="humidity-min">54</span> %</td>
<td><span id="humidity-max">34</span> %</td>
<td><span id="humidity-avg">23</span> %</td>
</tr>
<tr>
<td>Pressure</td>
<td><span id="pressure-min">23</span> hPa</td>
<td><span id="pressure-max">43</span> hPa</td>
<td><span id="pressure-avg">23</span> hPa</td>
</tr>
<tr>
<td>Current Truck Turnaround Time</td>
<td><span id="current-truck-turnaround-time-min">34</span> min</td>
<td><span id="current-truck-turnaround-time-max">34</span> min</td>
<td><span id="current-truck-turnaround-time-avg">23</span> min</td>
</tr>
<tr>
<td>Improved Truck Turnaround Time</td>
<td><span id="improved-truck-turnaround-time-min">23</span> min</td>
<td><span id="improved-truck-turnaround-time-max">23</span> min</td>
<td><span id="improved-truck-turnaround-time-avg">32</span> min</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
尝试添加tablemin-width: 400px;和.main-card-table-contentoverflow-x: auto;
【参考方案1】：
min-width 在内容小于最小宽度时应用。因此，只需将此属性添加到table，您的大小400px 与div 宽度相同。然后将overflow-x 属性添加到表的父级，即在您的情况下为.main-card-table-content。
所以代码是
table
...
min-width: 400px;
.main-card-table-content
...
overflow-x: auo;
【讨论】：
以上是关于溢出 x：当外部 div 很小时，自动不显示滚动的主要内容，如果未能解决你的问题，请参考以下文章
html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动？