如何在html表格中添加水平滚动条，以便只在手机上显示滚动条，而不是在更宽的屏幕上显示

Question

如何向 html 表格添加水平滚动条，以便仅在手机上显示滚动条，而不在更宽的屏幕上显示。我尝试了“https://stackoverflow.com/questions/5533636/add-a-horizontal-scrollbar-to-an-html-table”中提到的内容

HTML

<div class="table_wrapper">
<table......>
......
</table>
</div>

CSS

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

Answer 1

我整理了一个小演示，希望能解决您的问题。

为了让表格作为一个块运行，并允许滚动条并保持其自己的宽度而不是适应其内容的宽度，我们首先设置

display: block

现在表格将保持其自己的宽度，我们希望确保它尝试使宽度适合内容，因此我们设置

width: max-content

但是，我假设我们不希望它变得太大。现在我们需要添加一个限制，如果您使用包装器，您可能希望它填充容器，所以也许

100%

最适合您，但是出于我的目的，我设置了

max-width: 80%

所以即使内容在移动设备上太大，只会使宽度达到容器的 80%。

现在我们需要决定当内容溢出或子级对于父级来说太大时会发生什么，我设置了

overflow: auto

，它将在溢出时自动设置滚动条，而不是在没有溢出时自动设置滚动条。

为了强制没有内容的行的宽度，我也将其设置为一个块，并且还可以调整表格的大小，以便您可以模拟屏幕变小而无需使用任何开发工具。

如果您对我的示例有任何问题或疑问，请告诉我！

table {
  resize: horizontal;
  display: block;
  border: 1px solid black;
  width: max-content;
  max-width: 80%;
  overflow: auto;
}
tr {
  display: block;
  border: 1px solid red;
  width: 200px;
  height: 20px;
}

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>