时间戳

首页 > 解决方案 > 使 html 表格元素响应水平滚动

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

问题描述

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

我通过将整张桌子包裹在 

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

正如您在表格一侧的适当边距中看到的那样。

在此处输入图像描述

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

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

在此处输入图像描述

使用metaonviewport不会使表格响应。我认为文件可能是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;
}

标签： htmlcsshtml-tableresponsive

解决方案

我想建议两种方法来解决您的问题。

问题：

目前，您的表头超过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>

上面示例中的分隔表。因为这里的真正问题是因为您的内容表需要比可用空间更多的水平空间（宽度），这带来了滚动，而您的标题表也占用了相同的空间并根据该空间将所有内容居中。

更多在这里创建一个相同的例子： 链接

更新 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>

推荐阅读