Question

我目前的任务是为我的作品网站制作一个移动样式表，并且我已经在一些最后阶段打了一堵墙。

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

我想通过将按钮（表格单元格）放到它自己的行上来制作一个包含按钮响应的表格，当它达到450px宽时。我只能通过divs而不是tables来完成此操作。我已经创建了一个我想要做的简单示例http://test.aboutcher.co.uk/so/tables.html，但我不知道如何在表格中实现这种效果。

我知道表格对于布局来说是一个坏主意，但我无法在源代码中改变它，所以必须用它来对抗。

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

Answer 1

虽然这不是一种理想的方式。但是正如我所看到的，我认为你可以创建另一个表行，并通过显示无显示来隐藏它;然后使用CSS媒体查询，在其中设置指定宽度：XXpx;并将前2个coloumn设置为display: none;，将bottom table colomn设置为display : block;

希望有意义

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

Answer 2

您只需要定义td为display:block并将其作为div进行操作即可。看一下这个演示：http://jsfiddle.net/68EQK/

使表格单元格成为块元素

2 个答案: