Question

我有一个包含三列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              |
-----------------------

Answer 1

Use media queries (@media screen and ( max-width: 800px ) { your css classes here }) in css to adjust the behavior of the table. E.g. i have copied the JSFiddle code that you shared and tweaked it to use a media query in css to make the table show the third cell in the next line when the width of the browser is less than or equal to 800px otherwise it will show all cells in single row. In both cases the width of the cells will be adjusted based on percentage. You can add multiple media queries in css to handle other screen sizes for different behaviours.

Here is the tweaked code link: https://jsfiddle.net/y9hbLjxt/

Hope this helps.

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

1 个答案: