html - 调整屏幕大小时，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 会表现得很奇怪。

The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level.

随着following ，它的行为并不奇怪:

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

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