更新

Question

我知道互联网上有很多关于此的信息，但是我似乎无法让表格中的元素对水平滚动的应用程序做出响应。

我通过将整个表包装在

中来使表本身具有响应能力

<div style="overflow-x:auto;"></div>

如您在表格侧面的适当空白处所见。

问题：：随着屏幕缩小，文本居中对齐，因此它保留在需要滚动的整个页面视图的中心，而不会移动到中心缩小的表格行。

即使页面缩小，我也希望该应用看起来像第一张图片。

在meta上使用viewport不会使表响应。我认为该文件可能是html4，但我不确定如何根据文件中的代码确定该如何确定，因此我在下面添加了html代码。

我尝试使用

之类的媒体查询

@media only screen and (max-width: 1000px) {
  body {
    background-color: lightblue;
  }
}

仅测试我是否可以使用它，但是当宽度为1000px或更小时，这甚至都没有更改应用程序的背景颜色。

我指定中间，左边还是右边都没关系，文本会随着表格缩小而被截断。

更新：

我已经将标题和内容拆分到了各自的容器中，这实现了标题响应的目的，但是却破坏了设计。

我需要将标题保持与表内容相同的宽度，因此我相信标题和内容不能位于其自己的容器中才能实现此目的。

我希望该应用看起来像下面的图片：

标题仍需要响应，同时仍要连接到整个表。

已更新的问题：无论如何调整屏幕，如何在使表头宽度始终与表的其余部分相同的同时，使表头具有响应能力。

这是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(); ?>

更新

我建议如下分隔表格的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>

使html表格元素响应水平滚动

1 个答案:

更新

更新2