Html 将两个 <td> 堆叠在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15570994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stack two <td> over each other
提问by user990460
I'm currently working on making a website responsive but the issue is, I need to make it responsive without touching the content of the page. So everything stays the same on the page, but with a new stylesheet and a little Javascript (but mainly CSS) I'm looking to accomplish this task.
我目前正在努力使网站具有响应性，但问题是，我需要在不触及页面内容的情况下使其具有响应性。所以页面上的所有内容都保持不变，但是我希望通过一个新的样式表和一些 Javascript（但主要是 CSS）来完成这项任务。
The website is made mostly with tables.. so when the browser is resized (or accessed with a mobile device), I want the second 'td' inside my 'tr' to stack under the first one instead of both being next to each other.
该网站主要是用表格制作的..所以当浏览器调整大小（或使用移动设备访问）时，我希望我的“tr”中的第二个“td”堆叠在第一个下方，而不是彼此相邻.
I gave the 'td' element a left float and a width of 100% and it worked fine in Firefox, but in Chrome & Safari, both 'td' are 50% and on the same line.
我给了 'td' 元素一个左浮动和 100% 的宽度，它在 Firefox 中运行良好，但在 Chrome 和 Safari 中，'td' 都是 50% 并且在同一行上。
Let me know if you have any ideas, anything is appreciated!
如果您有任何想法，请告诉我，我们不胜感激！
回答by Bigood
Use display:blockon your tr tdto adapt the layout.
使用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>回答by pdjota
回答by llanato
What your trying to do will either not work or cause you a massive headache. Tables aren't designed to be used for responsive design. If you say you can't touch the code then you're very stuck. The best way to get around this would be to re-write the code and replace any tables with DIVs, Ps etc. where relevant and the use CSS, jquery and media queries to make your site responsive.
您尝试做的事情要么不起作用，要么让您头疼不已。表格并非旨在用于响应式设计。如果您说您无法触摸代码，那么您就陷入困境。解决这个问题的最好方法是重新编写代码并在相关的地方用 DIV、Ps 等替换任何表格，并使用 CSS、jquery 和媒体查询使您的网站具有响应性。
The only way you can try make the site responsive currently would be to use jquery on page load to replace all the tables with DIVs, Ps etc and then go about using CSS, jquery and media queries to try and make the site responsive. This is not a recommended way to do it and I can't even guarantee this will work 100%.
您当前可以尝试使站点具有响应性的唯一方法是在页面加载时使用 jquery 将所有表替换为 DIV、Ps 等，然后继续使用 CSS、jquery 和媒体查询来尝试使站点具有响应性。这不是推荐的方法，我什至不能保证这会 100% 工作。
回答by Paul
Another possibility is to nest the government site inside an iframe, that way you can use something like JQuery to do whatever you want to the site.
另一种可能性是将政府网站嵌套在iframe.
回答by James Donnelly
Sounds like you're using tables for layout and nottabular data. Tables should onlybe used for tabular data.
听起来您正在使用表格进行布局而不是表格数据。表格应该只用于表格数据。
You'd need to use grouping contentinstead; more specifically, the divelement:
<div>
<div>Top</div>
<div>Bottom</div>
</div>
It's worth noting that depending on what type of content is present within your top and bottom containers you may want to use a different element altogether.
回答by Paul
Have you tried putting two divs inside the table cell with a float lefton them. When the table collapses they should stack.
您是否尝试将两个divs 放在表格单元格中，并float left在上面放上a 。当桌子倒塌时，它们应该堆叠起来。
