将两个<td>相互堆叠
将两个<td>相互堆叠
提问于 2013-03-22 21:01:21
我目前正在制作一个响应性的网站，但问题是，我需要让它响应性而不接触页面的内容。因此，页面上的所有内容都保持不变，但通过使用新的样式表和一些Javascript (但主要是CSS)，我希望能够完成这项任务。
这个网站主要是由表格组成的。因此，当浏览器调整大小(或通过移动设备访问)时，我希望'tr‘中的第二个'td’堆叠在第一个‘td’下，而不是两个‘td’相邻。
我给了'td‘元素一个左浮点数和一个100%的宽度，它在Firefox中工作得很好，但在Chrome和Safari中，这两个'td’元素都是50%，并且在同一行上。
如果你有任何想法，请让我知道，任何事情都很感谢！
回答 6
Stack Overflow用户
发布于 2013-03-22 21:08:05
在tr td上使用display:block来调整布局。
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>
Stack Overflow用户
发布于 2013-03-22 21:07:22
尝试使用CSS更改显示，这样它将转到另一行：
td {
display: block;
clear:both;
}请参阅示例just made
Stack Overflow用户
发布于 2013-03-22 21:07:44
你想做的事情要么行不通，要么会让你头疼不已。表格不是为响应式设计而设计的。如果你说你不能接触代码，那么你就被卡住了。解决这个问题的最好方法是重写代码，并在相关的地方用DIVs、Ps等替换任何表，并使用CSS、jquery和媒体查询来使您的站点响应。
目前你可以尝试让站点响应的唯一方法是在页面加载时使用jquery，用DIVs、Ps等替换所有的表，然后使用CSS、jquery和媒体查询来尝试使站点响应。这不是一种推荐的方法，我甚至不能保证这会100%有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15570994
复制相关文章
相似问题
腾讯云开发者
