1

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

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

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

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

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

4

2 回答 2

0

您只需要定义您的tdisdisplay:block并将它们操作为您的div. 看看这个演示：http: //jsfiddle.net/68EQK/

于 2013-02-25T11:33:51.853 回答
0

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

希望这是有道理的

@media (max-device-width = 400px) {
  .second-column{display:block;}
.first-column{display:none;}
}
于 2013-02-25T11:31:15.010 回答