Question

我在创建响应式表格时遇到问题，当内容区域不再足以容纳表格时，该表格会滚动。

我将每个表包装在div中，并将overflow-x应用于它。不要滚动＆＃39;或者＆＃39; auto＆＃39;我正在努力，而且我还没能弄清楚什么样的风格阻止它按预期工作。

它以最小的尺寸工作（一旦页面转移到单个列）。但是，只要侧边栏位于内容区域旁边，桌面就会丢失其滚动条，侧边栏会从浏览器侧面推开。

https://www.biometricupdate.com/201712/determining-the-best-biometric-reader-for-an-application

这是一个包含相关代码的代码段。它不在网站的其他部分的上下文中，我怀疑可以在不考虑周围的代码的情况下找到答案，但这是精确代码的缩小版本。＃39;给我带来问题：

＆＃13;

main {
  color: #333;
  display: table;
  width: 100%;
}

main>.primary {
  display: table-cell;
  vertical-align: top;
}

main>.secondary {
  display: table-cell;
  vertical-align: top;
  width: 372px;
}

.tablescroll {
  overflow-x: auto;
}

＆＃13;

<main class="max-outer">
  <div class="primary">
    <div class="tablescroll">
      <table id="tablepress-1" class="tablepress tablepress-id-1">
        <thead>
          <tr class="row-1 odd">
            <th class="column-1">Technology</th>
            <th class="column-2">Convenience</th>
            <th class="column-3">Acceptability</th>
            <th class="column-4">Speed</th>
            <th class="column-5">Environment</th>
          </tr>
        </thead>
        <tbody class="row-hover">
          <tr class="row-2 even">
            <td class="column-1">Fingerprint Recognition</td>
            <td class="column-2">Most widely used biometric; intuitive and easy to use; finger placed on sensor; lit with red light</td>
            <td class="column-3">There is still some resistance to enrolling a fingerprint biometric; FAR is extremely low; FRR affects a small number of users; high quality readers reduce false rejects</td>
            <td class="column-4">Throughput is high, reads biometric in less than 1 second</td>
            <td class="column-5">Indoor, outdoor and ruggedized models</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="secondary">
  </div>
</main>

＆＃13;

到目前为止，我已尝试过各种溢出设置，并且我已尝试将表格本身设置为width：auto。

如果您使用浏览器开发者工具查看代码，您将看到table.tablepress包含在div.tablescroll中，并应用了溢出。

我确定有一个简单的解释，但我一直在浏览器开发者控制台中试图找出阻止滚动应用于桌面的内容，而且我＆我＃39;我不知所措。我希望有人遇到类似的问题，并回想起周围元素需要解决的对象或编码技术。我以前从没见过这种技术会像这样失败。

表外溢容器上的overflow-x不起作用

0 个答案: