调整屏幕大小时，表格无法在Chrome上恢复

Question

它只发生在Chrome上，一开始，表格显示效果很好。但是，当我将其调整为小尺寸然后更改回大屏幕时，桌子就搞砸了。这个调整大小的问题使它不完美请参阅下面的gif图像和代码。基本上，我希望表格在小屏幕上显示一行中的一个元素。如果是Chrome错误，是否有其他解决方案？谢谢。

@media screen and (max-width: 600px) {
  .responsive-table-md tbody td {
    display: block;
  }
}

I am wondering if there is way to fix it. If it is Chrome bug, is there any alternative to do the table staff.

<table class="responsive-table-md">
  <thead>
    <tr>
      <th>Test 1</th>
      <th>Test 2</th>
      <th>Test 3</th>
      <th>Test 4</th>
      <th>Test 5</th>


    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>

    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>E</td>

    </tr>
  </tbody>
</table>

Answer 1

根据article，应重置整组表格元素，如果您只重置td，则Chrome表现得很奇怪。

  

最大的变化是我们通过将每个与表相关的元素设置为块级来强制表不像表一样。

使用following时，它的行为并不奇怪：

@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
}

以下是完整的change，我稍微修改了文章中的CSS。