html - 使表格单元格成为 block 元素

Question

我目前的任务是为我的作品网站制作移动样式表，但我在最后阶段遇到了困难。

我的主要限制是我无法编辑源 HTML 并且必须使用提供的源。

我想通过将按钮(表格单元格)放到它自己的行来使包含按钮的表格在达到 450 像素宽时做出响应。我可以简单地通过 divs 而不是 tables 来做到这一点。我已经创建了一个简单的例子来说明我想做什么 http://test.aboutcher.co.uk/so/tables.html但我不知道如何在表格中实现这种效果。

我知道表格对于布局来说不是个好主意，但我无法在源代码中更改它，所以必须努力解决它。

编辑
我发现了我的问题，有一个非单元格未在源中应用 display:block 样式，导致其他两个正在接收样式的单元格忽略 display:block。

Answer 1

虽然这不是理想的方式。但正如我所见，我认为您可以创建另一个表行，并通过不显示来最初隐藏它；然后使用 CSS 媒体查询，在其中设置指定宽度:XXpx；并将顶部第二列设置为 display: none; 并将底部表格列设置为 display : block;

希望这是有道理的

@media (max-device-width = 400px) {
  .second-column{display:block;}
.first-column{display:none;}
}