为什么我的 html 表格中没有显示水平滚动？答案

【问题标题】：Why isn't horizontal scroll showing in my html table?为什么我的 html 表格中没有显示水平滚动？
【发布时间】：2021-08-24 11:44:08
【问题描述】：

我正在尝试在表格中同时添加水平和垂直滚动。

代码：

    #employee_details{
      display:block;
      position: absolute;
      top:15em;
      left:20em;
      width:85em;
      height: 20em;
      overflow-x: auto;
      overflow-y: auto;
    }
    
    #emp{
      height: 20em;
      overflow-x: auto;
      overflow-y: auto;
      width: 40em;
    }

   &lt;div id="emp"&gt;&lt;table id="employee_details" border="2"&gt;&lt;/table&gt;&lt;/div&gt;

但在我的输出中，我得到的只是表格中的垂直滚动，而不是水平滚动。

我该如何解决这个问题？

请帮帮我。

【问题讨论】：

添加overflow: scroll; 以同时进行水平和垂直滚动
从表格中移除所有样式，尤其是绝对位置和显示块

标签： html css html-table

【解决方案1】：

将 position: relative; 添加到您的父 div #emp

#emp {
  height: 20em;
  overflow-x: auto;
  overflow-y: auto;
  width: 40em;
  position: relative;
}

#employee_details {
  display: block;
  position: absolute;
  top: 15em;
  left: 20em;
  width: 85em;
  height: 20em;
  overflow-x: auto;
  overflow-y: auto;
}

<div id="emp">
  <table id="employee_details" border="2"></table>
</div>

【讨论】：

【解决方案2】：

试试这个：

.emp {
  overflow: hidden;
  overflow-x: auto;
  clear: both;
  width: 100%;
}

.employee_details {
  min-width: rem-calc(640);
}

<div id="emp">
<table id="employee_details" border="2">
</table>
</div>

【讨论】：

【解决方案3】：

表格同时具有垂直和水平滚动。如果你想看到你可以减少表格的宽度和高度（“#employee_details”）。

【讨论】：