Question

我目前正在努力使网站响应，但问题是，我需要在不触及页面内容的情况下使其响应。因此，页面上的所有内容都保持不变，但是使用新的样式表和一些Javascript（但主要是CSS），我希望完成此任务。

该网站主要由表格组成..因此，当浏览器调整大小（或使用移动设备访问）时，我希望我的'tr'中的第二个'td'堆叠在第一个，而不是下一个彼此。

我给了'td'元素一个左浮动和100％的宽度，它在Firefox中运行良好，但在Chrome＆amp; Safari，'td'都是50％且在同一条线上。

如果您有任何想法，请告诉我，有什么值得赞赏的！

Answer 1

使用display:block上的tr td来调整布局。

tr td {
  padding: 20px 40px;
  border: 1px solid black;
  display: block;
}

<table>
  <tr>
    <td>Damn</td>
    <td>This</td>
    <td>Table</td>
    <td>Layout</td>
  </tr>
</table>

Answer 2

尝试使用CSS更改显示，然后转到另一行：

td {
  display: block;
  clear:both;
}

查看示例just made

Answer 3

你要做的事情要么不起作用，要么让你头疼。表格不适用于响应式设计。如果你说你无法触摸代码那么你就会陷入困境。解决这个问题的最佳方法是重新编写代码并用相关的DIV，Ps等替换任何表，并使用CSS，jquery和媒体查询来使您的网站响应。

你可以尝试使网站响应的唯一方法是在页面加载时使用jquery用DIV，Ps等替换所有表，然后继续使用CSS，jquery和媒体查询来尝试使网站响应。这不是推荐的方法，我甚至不能保证这将100％工作。

Answer 4

您是否尝试在表格单元格中放置两个div，并在其上加float left。当表崩溃时，它们应该堆叠。

Answer 5

听起来你正在使用表格进行布局而不是表格数据。表仅用于表格数据。

您需要使用grouping content代替;更具体地说，div element：

<div>
    <div>Top</div>
    <div>Bottom</div>
</div>

值得注意的是，根据您的顶部和底部容器中存在的内容类型，您可能需要使用different element altogether。

Answer 6

另一种可能性是将政府网站嵌套在iframe内，这样你就可以使用像JQuery这样的东西为网站做任何你想做的事。