将两个<td>堆叠在一起

Question

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

该网站主要由表格组成..因此,当浏览器调整大小(或通过移动设备访问)时,我希望我的'tr'中的第二个'td'堆叠在第一个下面,而不是两个彼此相邻.

我给了'td'元素一个左浮动和100%的宽度,它在Firefox中运行良好,但在Chrome和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;
}

查看刚刚制作的示例

Answer 3

您是否尝试过将两个divs 放入表格单元格中，并在float left其上添加 。当桌子倒塌时，它们应该堆叠起来。