使 html 表格元素响应水平滚动
Posted
技术标签:
【中文标题】使 html 表格元素响应水平滚动【英文标题】：Making html table elements responsive for horizontal scroll 【发布时间】：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 Costs text 和一个view 按钮 i>，无论表格滚动或不缩小设备的屏幕宽度，始终居中。我说的对吗？
【参考方案1】：
我想建议两种方法来解决您的问题。
问题：
目前，您的 表格标题 超出了 width 的可用水平空间及其父级 container，而不是在缩小/调整屏幕宽度时缩小。
1.保持 HTML 结构不变。
将标题表的max-width 改为100%，在任何情况下都不能超出水平可用空间。
真正的原因是overflow-x:auto; 将它从包裹你的标题表的<div style="overflow-x:auto;"> 中删除。
这一定能解决你的问题。
2。更新您的 HTML 标记。
您可以使用两个单独的容器来存放两个不同的表格，即用于标题（包含 OIT Work Order Maintenance Costs 和一个按钮）和内容。
您可以毫无问题地做到这一点的原因是您的标题和内容表在设计上没有相对相同的列数或相关性。
我希望这对你有帮助。此外，如果您希望通过示例来理解，请您在 HTML 和 CSS 中发布与您的问题相关的任何内容。
更新
我建议将表格的 HTML 标记分开如下：
#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;
<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">
<!-- Your header table -->
<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>
</table>
<!-- Your body table -->
<div style="overflow-x:auto;">
<table class="container">
<!-- .....other table bodies excluded for clarity -->
</table>
</div>
</div>
</div>
</div>上面示例中的分隔表。因为这里的真正问题是因为您的内容表需要比可用空间更多的水平空间（宽度），这会带来滚动，而您的标题表也需要相同的空间并根据该空间居中所有内容。
更多在这里创建一个相同的例子：Link
更新 2
#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;
table border-collapse: collapse; width:100%;
td, th
border: 1px solid;
<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">
<!-- Your header table -->
<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>
</table>
<!-- Your body table -->
<div style="overflow-x:auto;">
<table class="container">
<!-- .....other table bodies excluded for clarity -->
<tbody>
<tr role="row" class="odd">
<th class="sorting_1">Airi</th>
<th>Satou</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
<th>5407</th>
<th>a.satou@datatables.net</th>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Angelica</td>
<td>Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
<td>5797</td>
<td>a.ramos@datatables.net</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>【讨论】：
我发现带有视口的元对我来说基本上没有任何作用，我需要overflow-x:auto 来使表格响应。由于meta 和viewport 仅适用于html5，我是否有可能使用html4？我已经检查了知道的方法，但是 html 的结构方式并没有清楚地告诉我我正在使用哪个版本。我已经更新了代码，我是否按照您的意图应用了max-width？另外，在您的第二个策略中，哪些属性将应用于两个容器？
@MelodyAnoni，更新了我的答案，实际上在这种情况下它与元视口无关。
@MelodyAnoni，如果您仍然觉得问题难以解决，请告诉我。
非常感谢您的出色帮助。我已经应用了更改并且它有效，问题是我需要将标题连接到整个表格。我目前正在更新。
很高兴它对您有所帮助。以上是关于使 html 表格元素响应水平滚动的主要内容，如果未能解决你的问题，请参考以下文章
UITableView contentInset 使表格视图除了垂直滚动外还水平滚动