html - 将两个 堆叠在一起

Question

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

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

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

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

Answer 1

在 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>