HTML 中的屏幕响应式 PHP 表

Question

所以我有一个html页面，它使用PHP调用来填充各种表。该页面在我的一个屏幕上看起来很棒，在其他地方都很糟糕。希望它是一个简单的修复，但任何反馈将不胜感激。我知道我不应该使用px，但百分比对我来说不能正常工作。The CSStd.COMPLETE {background-color: green;color: black;text-align: center;}td{ color: white;text-align: center;}td.Blue {background-color: blue;color: white;text-align: center;}td.Yellow {background-color: yellow;color: black;text-align: center;}td.Orange {background-color: orange;color: black;text-align: center;}td.Red {background-color: red;color: black;text-align: center;}#dTitle { position: fixed; visibility: visible; left: 1295px; top: 135px;}#dTable { position: fixed; visibility: visible; left: 1050px; top: 175px;}#cTitle { position: fixed; visibility: visible; left: 865px; top: 135px;}#cTable { position: fixed; visibility: visible; left: 855px; top: 175px; width:20%}#rTitle { position: fixed; visibility: visible; left: 350px; top: 135px;}#rTable { position: fixed; visibility: visible; left: 50px; top: 175px; width:45%}#sTitle { position: fixed; visibility: visible; left: 450px; top: 550px; }#sTable { position: fixed; visibility: visible; left: 50px; top: 590px; width:60%}

Answer 1

您可以使用CSS媒体查询，通过它您可以为不同的屏幕大小提供单独的样式，也可以使用任何HTML5样板，例如Bootstrap，通过它您不需要显式编写媒体查询。在bootstrap的情况下，在HTML head标签中添加库CSS链接，你就可以了。

• 使用媒体查询的响应式表的示例。

• 使用 Bootstrap 的响应式表的示例。

建议

• <center>标记已折旧，请尝试使用 CSS 代替（请转介我）。

• 首先，添加到您的头部部分。<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1,0">

• 您在 head 中添加的以下代码段导致页面刷新。（请参考我）.<META HTTP-EQUIV="refresh" CONTENT="86400">

• 始终尝试使用 CSS 类，而不是直接将样式提供给 html 元素。

• 您还可以省略移动视图中的某些列（如果不是必需的），或者您可以为 HTML 表格启用水平滚动（请咨询我）。

Answer 2

对于那些好奇的人，我最终使用了W3。CSS 及其容器对象。除了一张桌子之外，所有工作都按照我的意图工作，这很可能是我搞砸的东西。

Answer 3

我不明白你在html上设置的元标记是什么，但尝试这样做以使屏幕响应

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1,0">

之后，您可以使用css设置屏幕响应条件