2017-03-09 212 views
1

我在网页上有一个表格(下面的代码),出于某种原因,当我在移动设备上导航到此页面时,表格的右侧似乎被切断了?我怎样才能解决这个问题?在移动设备上切断桌面?

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

请问这[链接](http://stackoverflow.com/questions/23371582/why-is-my-website-cutting-off-on-mobile-devices)有帮助吗?也许尝试将你的'meta'标签改为'

+0

尝试使用bootstrap并使用.table-responsive类。 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h – SGventra

回答

1

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

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

这仍然削减表:/ – Brittany

+0

它允许我从左到右滚动,但我希望整个页面到设备的大小? – Brittany

+0

欢迎使用手机设计;)就像我说的那样,让手机在移动设备上正常工作很困难 –

1

您可以随时使用媒体查询。

不幸的是,他们不适合内联的CSS,所以你需要给表的类和一个CSS文件。

通过媒体查询,您可以为不同大小设置特定的css规则。

所以这

@media屏幕和(最大宽度:800像素){ .tableclass { 宽度:; } }

可否设定,让如果屏幕尺寸小于800个像素表将使用不同的宽度。

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

+0

尝试了这一点,我的表的右侧仍然被切断:/ – Brittany

相关问题