如何使响应式 html 表匹配视口初始比例 1.0

Posted 2023-03-05

【中文标题】如何使响应式 html 表匹配视口初始比例 1.0

【英文标题】：How to make responsive html table to match viewport initial scale 1.0

【发布时间】：2016-03-17 18:55:27

【问题描述】：

在我的网站中，我有一些包含页眉页脚分区和表格的页面， 我正在使用视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

html 表格包含很多列，因此在移动设备中它会溢出到屏幕上。

要查看整个 html 表格，访问者必须缩小网页。

如图片所指：

缩小后你可以看到图片标题和div没有扩展以匹配html表格宽度。

缩小后宽度仍然很短，因为我为此使用元视口，初始比例为 1.0

但我需要这样的结果

参考图片：

我需要这方面的帮助 - 当网页在移动设备的浏览器中打开时。

html 表格应缩小 [缩小] 到设备宽度，所有其他元素的宽度应保持相同或等于设备宽度。

我在网上搜索发现：enter link description here 4. 响应式表格

【参考方案1】：

您可以使用 Bootstrap 来覆盖这些场景。此外，Css 将图像设置为 100% 和高度，或者使用 css 技巧来实现这一点。 @Media 查询可以帮助您针对不同的设备分辨率动态加载或更改图像。

除此之外，我不确定您指定的问题是否与需要默认缩小的默认视图有关。