【发布时间】：2019-05-22 02:41:06
【问题描述】：
我知道互联网上有很多关于此的内容，但我似乎无法让我的表格中的元素响应水平滚动的应用程序。
我通过将整个表格包裹在
中，使表格本身具有响应性<div style="overflow-x:auto;"></div>
正如您在表格一侧的适当边距中看到的那样。
问题：随着屏幕缩小，文字居中对齐，所以它停留在需要滚动的整个页面视图的中心，不会移动到中心缩小的表格行。
我希望应用看起来像第一张图片，即使页面缩小了。
在viewport 上使用meta 不会使表格响应。我认为文件可能是html4，但我不确定如何根据文件中的代码确定，所以我在下面包含了html代码。
我尝试过使用媒体查询，例如
@media only screen and (max-width: 1000px) {
body {
background-color: lightblue;
}
}
只是为了测试我是否可以让一个工作，但是当宽度为 1000 像素或更小时，这甚至不会改变应用程序的背景颜色。
无论我指定居中、左还是右，文本都会随着表格的缩小而被截断。
更新：
我已经将标题和内容拆分到各自独立的容器中，这实现了标题响应的目标，但它破坏了设计。
我需要保持标题与表格内容的宽度相同，所以我相信标题和内容不能在它们自己的容器中以完成此操作。
我希望应用看起来像下图：
标题需要响应，同时仍连接到整个表格。
更新的问题：无论屏幕如何调整，如何使表格标题响应，同时保持标题宽度始终与表格的其余部分相同。
这是html：
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h2 id="title" class="hidden" align="center">OIT Facilities Costs<p id="subtitle">by location<p>
</h2>
</div>
<p>This application visualizes 3 kinds of data </p>
<br>
<div id="dashboard1-div" align="center">
<div id="charts1-div">
<div id="tablediv">
<div style="overflow-x:auto;">
<table class="container">
<tbody>
<tr id="tr-test">
<td>
<p id="table1-heading" class="hidden">OIT Work Order Maintenance Costs</p>
<button id="OIT-btn" onclick="OITbutton()">View</button>
</td>
</tr>
<tbody>
<!-- .....other table bodies excluded for clarity -->
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
相关的css：
#tablediv{
padding-left: 25px;
padding-right: 25px;
}
#tr-test{
background-color: #2C3446;
max-width: 100%
}
#table1-heading{
text-align: center;
}
#OIT-btn, #elec-btn, #maint-btn{
display: block;
margin: auto;
}
【问题讨论】：
-
你在
head中有meta和viewport吗？ -
“我注意到如果我不指定元素的位置，它们会自动转到中心。但是如果我希望它右对齐或左对齐（我不）它是什么意思将应用这些更改。”？
-
是的，我在
head中有meta和viewport。 -
和@divy3993 我的意思是，我所做的任何类型的对齐都会被应用，但随着表格缩小，它不会保持在那个位置。我希望它在表格移动时居中对齐，但应用它不会改变任何东西。
-
好吧，如果我没听错的话，你说的是
table标头，它有OIT Work Order Maintenance Coststext 和一个view按钮 i>，无论表格滚动或不缩小设备的屏幕宽度，始终居中。我说的对吗？
标签： html css html-table responsive