显示：没有破坏 chrome 上的表格可访问性

Question

我有一个用扩展器组件包裹的桌子。默认情况下展开器是折叠的，因此使用 CSS display:none 隐藏里面的表格。单击扩展器图标时，窗格将展开并显示表格，即通过设置显示：表格上的块。

问题： 这工作正常，视觉上没有任何问题，但用 display:none 隐藏表格最初是破坏表格可访问性/浏览器如何感知其标题，Google Chrome 中的单元格（在 FF 中工作正常）并为元素分配不正确的角色（请参考下图）。这使得 NVDA 无法正确识别列标题和网格单元格及其关系。

这似乎是 Chrome 的问题，而不是我的代码。我已经使用两个示例表创建并测试了它。默认情况下，其中一个是隐藏的，当单击按钮时显示，另一个从不隐藏。

每个人都有笔：

最初隐藏的表： https://codepen.io/renektonlol/pen/LYJqpqB

<table class="tableSample">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jim</td>
            <td>20</td>
            <td>Male</td>
            <td>Tokyo</td>
        </tr>
    </tbody>

图片：

未隐藏的表： https://codepen.io/renektonlol/pen/oNPmjRa

图片：

有谁知道这个问题的解决方案以及为什么 Chrome 会误解标题和数据单元角色？

使用 Visibility:Hidden/Visible 解决了这个问题，但我不能使用这个属性，因为它隐藏了元素而不是它占用的空间。

谢谢