如何在可水平滚动的表格中显示可见的垂直溢出？

在可水平滚动的表格中显示可见的垂直溢出，可以通过以下步骤实现：

使用CSS设置表格容器的高度和宽度，并将其设置为可滚动的。例如，可以设置一个固定的高度和宽度，并为表格容器添加overflow: auto;样式。
在表格中的每个单元格中，使用CSS设置white-space: nowrap;样式，以防止文本换行。
在表格容器中添加一个包裹元素，例如<div>，并设置其高度为表格容器的高度减去表头的高度。这样可以确保表格内容在垂直方向上溢出时，只有包裹元素会出现滚动条。
使用CSS设置包裹元素的宽度为表格容器的宽度减去垂直滚动条的宽度。这样可以确保包裹元素的宽度与表格内容的宽度保持一致，避免出现水平滚动条。
在包裹元素中添加一个内部容器，例如<div>，并设置其高度为表格内容的高度。这样可以确保表格内容在垂直方向上溢出时，只有内部容器会出现滚动条。
在内部容器中添加表格，并设置其宽度为表格容器的宽度减去垂直滚动条的宽度。这样可以确保表格的宽度与包裹元素的宽度保持一致，避免出现水平滚动条。
使用CSS设置内部容器的overflow-y属性为scroll，以显示垂直滚动条。同时，设置内部容器的overflow-x属性为hidden，以隐藏水平滚动条。
根据需要，可以使用CSS设置表格的样式，例如设置表格边框、背景色等。

以下是一个示例代码：

<div class="table-container">
  <div class="wrapper">
    <div class="inner-container">
      <table>
        <!-- 表头 -->
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <!-- 其他列 -->
          </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
          <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
            <!-- 其他数据 -->
          </tr>
          <!-- 其他行 -->
        </tbody>
      </table>
    </div>
  </div>
</div>

.table-container {
  height: 300px;
  width: 100%;
  overflow: auto;
}

.wrapper {
  height: calc(100% - 30px); /* 减去表头的高度 */
  width: calc(100% - 20px); /* 减去垂直滚动条的宽度 */
}

.inner-container {
  height: 100%; /* 表格内容的高度 */
  width: 100%; /* 表格容器的宽度 */
  overflow-y: scroll;
  overflow-x: hidden;
}

table {
  width: calc(100% - 20px); /* 减去垂直滚动条的宽度 */
  border-collapse: collapse;
}

th, td {
  white-space: nowrap;
  /* 其他样式 */
}

这样，就可以在可水平滚动的表格中显示可见的垂直溢出，并且只有垂直滚动条会出现。根据实际需求，可以调整表格容器、包裹元素、内部容器的高度和宽度，以及表格的样式。