如何在与表格宽度相同的其他单元格（同一行）下方显示表格单元格？答案

【问题标题】：How can I display a table cell below other cells (of the same row) with the same width as the table?如何在与表格宽度相同的其他单元格（同一行）下方显示表格单元格？
【发布时间】：2017-03-02 07:28:15
【问题描述】：

我有一个包含三列 HTML 的表格。我想在同一行的前两个单元格下方显示每一行的第三个单元格，宽度与整个表格相同。我在单元格上使用了display: block 并将它们浮动到它们应该在的位置。

我的问题是，使用表格单元格/表格宽度的百分比会使第三个单元格太小或太大，具体取决于值。这是JSFiddle 添加边框后的样子。

我还尝试在第三个单元格上使用box-sizing: border-box，这只会使其更小。

编辑：我要做的是使表格可针对不同的浏览器/设备尺寸进行调整。保持表格行完整使得更大尺寸更容易。我唯一的问题是我无法让第三个单元格符合较小尺寸的表格宽度。

样机：

small size:                   bigger size:
-----------------------       ----------------------------------
| Header 1 | Header 2 |       | Header 1 | Header 2 | Header 3 |
-----------------------       ----------------------------------
| Cell 1   | Cell 2   |       | Cell 1   | Cell 2   | Cell 3   |
-----------------------       ----------------------------------
| Cell 3              |
-----------------------

【问题讨论】：

你想在你的问题中解释清楚
也许你可以提供某种视觉模型
为什么要第三个单元格在同一行？答案不就是将它作为一个单独的单元格放在自己的行上吗？
欢迎来到 Stack Overflow，E-MM。考虑在您的问题中添加一个简约示例，而不是链接。
创建两行，第一行有两个单元格，第二行将有一个单元格，colspan="2"

标签： html css

【解决方案1】：

在 css 中使用媒体查询 (@media screen and ( max-width: 800px ) { your css classes here }) 来调整表格的行为。例如。我已经复制了您共享的 JSFiddle 代码并对其进行了调整，以便在浏览器宽度小于或等于 800 像素时使用 css 中的媒体查询使表格显示下一行中的第三个单元格，否则它将显示所有单元格在单行中。在这两种情况下，单元格的宽度都将根据百分比进行调整。您可以在 css 中添加多个媒体查询来处理不同行为的其他屏幕尺寸。

这里是调整后的代码链接：https://jsfiddle.net/y9hbLjxt/

希望这会有所帮助。

【讨论】：