Question

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

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

Answer 1

这是因为在移动设备上使用表格很困难，如果可能的话应该避免使用。您可以查看将表格的宽度设置为100％并将溢出设置为滚动。这就是bootstrap让他们的表响应的方式

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

Answer 2

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

不幸的是它们不适用于内联css，所以你需要给表一个类并有一个css文件。

使用媒体查询，您可以为不同的尺寸设置特定的CSS规则。

所以这个

@media screen and（max-width：800px）{ .tableclass { 宽度：; } }

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

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

表在移动设备上切断了？

2 个答案: