React框架下HTML表格水平滚动条不显示问题求助

核心问题 #

你自定义的webkit内核滚动条样式中，明确将水平滚动条的高度设置为了0，这是水平滚动条不可见的直接原因。::-webkit-scrollbar选择器的height属性专门控制水平滚动条的高度，设为0后滚动条自然不会渲染显示，而触控板滚动属于系统级交互，不受滚动条样式显示的影响，所以可以正常滚动。

其他可优化的错误配置 #

• table元素设置overflow: scroll不生效：table默认的布局规则不支持overflow属性，你已经在外层.order容器配置了滚动，table上的overflow属性可以直接删除。
• table设置width: 100%存在冲突：你给每个td设置了最小宽度100px，整表16列最小宽度已经达到1600px，远大于普通容器宽度，100%宽度限制会导致表格布局异常，建议直接删除该属性。

修改后的完整CSS代码 #

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  align-self: center;
  justify-self: center;
  white-space: nowrap;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  min-width: 100px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.order {
  display: block;
  grid-area: orders;
  height: 100%;
  width: 100%;
  align-self: center;
  justify-self: center;
  max-height: 520px;
  overflow: auto; /* 改scroll为auto，没有溢出时不显示滚动条更美观 */
  justify-content: center;
  align-content: center;
 }

 ::-webkit-scrollbar {
  width: 5px;
  height: 5px; /* 把水平滚动条高度从0改为5px，和垂直滚动条宽度一致 */
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: grey;
 border-radius: 10px;
}

内容的提问来源于stack exchange，提问作者Noah Blochowitz