将两个<td>叠放在一起

Question

我目前正在努力使一个网站具有响应性，但问题是，我需要在不接触页面内容的情况下使其具有响应性。 因此，所有页面内容保持不变，但使用新样式表和少量JavaScript（主要是CSS）来完成此任务。

该网站主要由表格构成。因此，当浏览器调整大小（或使用移动设备访问）时，我希望位于“tr”内部的第二个“td”会叠放在第一个“td”下方，而不是并排在一起。

我给“td”元素设置了左浮动和100％的宽度，在Firefox中运行良好，但在Chrome和Safari中，两个“td”都是50％，并且在同一行上。

如果您有任何想法，请告诉我，我将不胜感激！

- dostrik

---

不要使用表格进行布局。 - Oded

很抱歉，TD（表格数据）并不是这样工作的。TD必须保持在同一行，并且只能通过放置到另一个TR中来放置到另一行。 - Billy Moat

-Oded，就像我说的，内容不在我的控制之内。页面的内容是由程序生成的，我无法访问那段代码。 -Billy，我理解这一点，但这就是我在这里询问的原因，也许有人有某种解决方案。 - dostrik

如果您无法更改HTML，我认为您在这里的任务面前真的很艰巨。 - Billy Moat

@Oded 即使在2021年，编写电子邮件时仍然需要使用表格。仅仅告诉人们不要使用表格是没有任何帮助的。 - Jimbo Jonny

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>

- Bigood

Answer 2

尝试使用CSS更改显示方式，使其转到另一行：

td {
  display: block;
  clear:both;
}

查看一个刚刚创建的示例

- pdjota

---

谢谢！有人也做了类似的事情。我现在会尝试一下。 - dostrik

如果您需要使用float（right或left）确保它进入另一行，则建议使用clear。 - pdjota

Answer 3

你想要做的事情要么无法实现，要么会给你带来巨大的麻烦。表格并不适合用于响应式设计。如果你说不能动代码，那么你就非常困难。解决这个问题的最好方法是重写代码，将任何表格替换为相关的DIV、P等，并使用CSS、jquery和媒体查询使你的网站具有响应式。

目前，你可以尝试使用jquery在页面加载时将所有表格替换为DIV、P等，然后使用CSS、jquery和媒体查询来尝试使网站具有响应式。这不是推荐的方法，我甚至不能保证这将百分之百有效。

- llanato

---

终于有人把我说的话都看完了。我对生成的内容没有控制权，这是一个政府网站，所以它已经过时了，但他们不会采取任何行动，所以我必须使用我所拥有的东西...也就是表格布局。不过还是谢谢你的回复！我想尽可能避免使用jQuery，因为我知道这不是最好的方法。 - dostrik

Answer 4

你试过将两个带有float left属性的

标签放在表格单元格内吗？当表格折叠时，它们应该会叠放在一起。

- user1945782

---

感谢您的快速回复。这是一个政府网站，所以我不能触碰页面上的任何内容。就像我之前回复的那样，内容是生成的，我无法访问它。我只是想为该网站创建一个移动解决方案。尽管我希望该网站使用divs制作，但现在不可能。也许将来，如果他们意识到该网站已经过时，我将能够做出适当的工作，但现在这不在我的能力范围内。 - dostrik

Answer 5

另一种可能性是将政府网站嵌套在一个iframe中，这样你就可以使用类似JQuery的工具对该网站进行任何想要的操作。

- user1945782

---

这完全取决于包含文档对iframe内容拥有的访问权限。 - James Donnelly

这个想法是它在客户端上处理已经生成的标记 - 服务器不能真正限制已经传递的内容... - user1945782

Answer 6

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

你需要使用分组内容，更具体地说是div元素：

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

值得注意的是，根据您顶部和底部容器中存在的内容类型，您可能希望使用完全不同的元素。

- James Donnelly

---

就像我在其他答案中回复的那样，我知道这是最好的方法，也是我通常的做法。但是我无法控制网页上的内容，我只是被要求尝试为该网站创建移动解决方案。所以尽管我很讨厌这种情况，但我无能为力。谢谢！ - dostrik

不幸的是，他不能以那种方式修改原始内容。 - user1945782

问题在于表格就是表格。表格有行和列。你试图将一个表格转化为不是表格的东西。你需要与掌控内容的人交谈并让他们进行更改。 - James Donnelly

@JamesDonnelly 很不幸，这并不总是可行的选择。 - user1945782

如果你被承包重新设计一个网站，那么你需要明确网站上需要改变的内容，以便这个任务能够完成。在进行这项工作时，你有可能会给你的公司带来不良的声誉。 - James Donnelly