使 html table 元素响应水平滚动
Making html table elements responsive for horizontal scroll
我知道 Internet 上有很多关于此的内容，但我似乎无法让我的 table 中的元素响应水平滚动的应用程序。
我通过将整个 table 包裹在
中，使 table 本身具有响应性
<div style="overflow-x:auto;"></div>
正如您在 table 一侧的适当边距所看到的那样。
问题：随着屏幕缩小，文字是center-aligned，所以一直停留在整个需要滚动的page view的中央，它不会移动到缩小的 table 行的中心。
我希望应用看起来像第一张图片，即使页面缩小也是如此。
在 viewport 上使用 meta 不会使 table 响应。我认为该文件可能是 html4 但我不确定如何根据文件中的代码确定，因此我在下面包含了 html 代码。
我试过使用像
这样的媒体查询
@media only screen and (max-width: 1000px) {
body {
background-color: lightblue;
}
}
只是为了测试我是否能让一个工作，但是当宽度为 1000 像素或更小时，这甚至不会改变应用程序的背景颜色。
无论我指定居中、居左还是居右，文本都会随着 table 缩小而被截断。
更新：
我已将 header 和内容拆分到它们自己单独的容器中，这实现了 header 响应的目标，但它破坏了设计。
我需要保持 header 与 table 内容的宽度相同，所以我相信 header 和内容不能放在它们自己的容器中才能完成这个。
我希望应用看起来像下图这样：
header 需要响应，同时仍与整体 table 相连。
更新问题： 我怎样才能使 table header 响应，同时保持 header 宽度始终与剩下的table，不管屏幕怎么调整。
这是 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;
}
我想推荐两种方法来解决您的问题。
问题：
目前您的 Table Header 在 width 中超过可用水平 space 及其 parent container，而不是缩小 reducing/resizing 屏幕宽度。
1.保持 HTML 结构不变。
使headertables'max-width到100%，以一种不能超出可用的方式space 在任何情况下都是水平的。
真正的原因是 overflow-x:auto; 将其从 <div style="overflow-x:auto;"> 中删除，它包裹了您的 header table.
这一定能解决您的问题。
2。正在更新您的 HTML 标记。
您可以使用两个单独的容器来容纳两个不同的 table，即 header（包含 OIT Work Order Maintenance Costs 和一个按钮）和内容。
你可以毫无问题地做到这一点的原因是你的 header 和内容 table 没有相对相同的列数或设计相关。
希望对您有所帮助。此外，如果您想要一个示例来理解，会要求您 post 您的 HTML 和 CSS 中与您的问题相关的任何内容。
更新
我建议将 table 的 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>
Separated tables here on above example. As the real issue here is because of your content table requires more horizontal space(width) than available which brings the scrolls and your header table also takes the same space and centers everything according to that space.
这里创建了更多相同的示例：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>2,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>2,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>,200,000</td>
<td>5797</td>
<td>a.ramos@datatables.net</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
我知道 Internet 上有很多关于此的内容，但我似乎无法让我的 table 中的元素响应水平滚动的应用程序。
我通过将整个 table 包裹在
中，使 table 本身具有响应性<div style="overflow-x:auto;"></div>
正如您在 table 一侧的适当边距所看到的那样。
问题：随着屏幕缩小，文字是center-aligned，所以一直停留在整个需要滚动的page view的中央，它不会移动到缩小的 table 行的中心。
我希望应用看起来像第一张图片，即使页面缩小也是如此。
在 viewport 上使用 meta 不会使 table 响应。我认为该文件可能是 html4 但我不确定如何根据文件中的代码确定，因此我在下面包含了 html 代码。
我试过使用像
这样的媒体查询@media only screen and (max-width: 1000px) {
body {
background-color: lightblue;
}
}
只是为了测试我是否能让一个工作，但是当宽度为 1000 像素或更小时，这甚至不会改变应用程序的背景颜色。
无论我指定居中、居左还是居右，文本都会随着 table 缩小而被截断。
更新：
我已将 header 和内容拆分到它们自己单独的容器中，这实现了 header 响应的目标，但它破坏了设计。
我需要保持 header 与 table 内容的宽度相同，所以我相信 header 和内容不能放在它们自己的容器中才能完成这个。
我希望应用看起来像下图这样：
header 需要响应，同时仍与整体 table 相连。
更新问题： 我怎样才能使 table header 响应，同时保持 header 宽度始终与剩下的table，不管屏幕怎么调整。
这是 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;
}
我想推荐两种方法来解决您的问题。
问题：
目前您的 Table Header 在 width 中超过可用水平 space 及其 parent container，而不是缩小 reducing/resizing 屏幕宽度。
1.保持 HTML 结构不变。
使headertables'
max-width到100%，以一种不能超出可用的方式space 在任何情况下都是水平的。真正的原因是
overflow-x:auto;将其从<div style="overflow-x:auto;">中删除，它包裹了您的 header table.
这一定能解决您的问题。
2。正在更新您的 HTML 标记。
您可以使用两个单独的容器来容纳两个不同的 table，即 header（包含 OIT Work Order Maintenance Costs 和一个按钮）和内容。
你可以毫无问题地做到这一点的原因是你的 header 和内容 table 没有相对相同的列数或设计相关。
希望对您有所帮助。此外，如果您想要一个示例来理解，会要求您 post 您的 HTML 和 CSS 中与您的问题相关的任何内容。
更新
我建议将 table 的 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>
Separated tables here on above example. As the real issue here is because of your content table requires more horizontal space(width) than available which brings the scrolls and your header table also takes the same space and centers everything according to that space.
这里创建了更多相同的示例：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>2,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>2,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>,200,000</td>
<td>5797</td>
<td>a.ramos@datatables.net</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>