移动设备上的表格被切断？答案

【问题标题】：Table cut off on mobile device?移动设备上的表格被切断？
【发布时间】：2017-03-10 05:03:36
【问题描述】：

我在网页上有一个表格（代码下方），由于某种原因，当我在移动设备上导航到此页面时，表格的右侧似乎被切断了？我该如何解决这个问题？

<head>

<meta name="viewport" content="width=1000">

</head>

    <center>

        <table style="width:80%;"><tr>
         <td> 
          <?php print render($page['content']); ?> 
            </td>

            <td valign="top" style="padding-left:2%;  font-size:18px;">

                  <?php print render($page['highlighted']); ?> 

            </td>


            </tr></table>

        </center>

【问题讨论】：

this link 有帮助吗？也许尝试将您的 meta 标签更改为 <meta name="viewport" content="width=device-width" />
尝试使用引导程序并使用 .table-responsive 类。 w3schools.com/bootstrap/…

标签： html

【解决方案1】：

这是因为在移动设备上使用表格很困难，应尽可能避免使用。您可以查看将表格的宽度设置为 100% 并将溢出设置为滚动。这就是引导程序如何让他们的表响应

<table style="width:80%; overflow: scroll;">

【讨论】：

这仍然切断了桌子：/
它允许我从左到右滚动，但我希望整个页面适合设备的大小？
欢迎来到移动设计 ;) 就像我说的很难让表格在移动设备上正常工作

【解决方案2】：

您始终可以使用媒体查询。

不幸的是，它们不适用于内联 css，因此您需要为表指定一个类并拥有一个 css 文件。

通过媒体查询，您可以为不同的尺寸设置特定的 css 规则。

所以这个

@media screen and (max-width: 800px) { .tableclass { 宽度： ; } }

将设置它，因此如果屏幕尺寸小于 800 像素，表格将使用不同的宽度。

始终确保媒体查询位于 css 文件的底部。您可以一次设置多个。

【讨论】：

试过了，我桌子的右手边仍然被切断：/