在移动设备上切断桌面?
问题描述:
我在网页上有一个表格(下面的代码),出于某种原因,当我在移动设备上导航到此页面时,表格的右侧似乎被切断了?我怎样才能解决这个问题?在移动设备上切断桌面?
<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>
答
您可以随时使用媒体查询。
不幸的是,他们不适合内联的CSS,所以你需要给表的类和一个CSS文件。
通过媒体查询,您可以为不同大小设置特定的css规则。
所以这
@media屏幕和(最大宽度:800像素){ .tableclass { 宽度:; } }
可否设定,让如果屏幕尺寸小于800个像素表将使用不同的宽度。
务必确保媒体查询位于css文件的底部。您可以一次设置多个。
+0
尝试了这一点,我的表的右侧仍然被切断:/ – Brittany
请问这[链接](http://*.com/questions/23371582/why-is-my-website-cutting-off-on-mobile-devices)有帮助吗?也许尝试将你的'meta'标签改为' –
尝试使用bootstrap并使用.table-responsive类。 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h – SGventra