HTML 中的屏幕响应式 PHP 表

Question

所以我有一个html页面，它使用PHP调用来填充各种表。该页面在我的一个屏幕上看起来很棒，在其他地方都很糟糕。希望它是一个简单的修复，但任何反馈将不胜感激。我知道我不应该使用px，但百分比对我来说不能正常工作。

The CSS

td.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&nbsp;charset="utf-8"&nbsp;name="viewport"&nbsp;content="width=device-width,&nbsp;initial-scale=1,0">之后，您可以使用css设置屏幕响应条件