表格和水平滚动 - jQuery Mobile

4
我目前正在使用PhoneGap和jQuery Mobile编写应用程序。我的应用程序之一的功能是从网站上获取数据并将其附加到页面上。但是,部分数据包括一个表格,在我的Android上被截断了(表格太宽而无法适应)。解决方案是实现水平滚动条,但我在做这样的事情时遇到了麻烦。
有什么建议吗?
编辑: 这是移动设备上的样子。 这是我的台式电脑上的样子。
有没有办法向右(x轴)滚动?
编辑2: 我正在格式化的不是我的HTML。我基本上是从成功的ajax GET调用中获取HTML并将其转储到页面上。
$('#insert').html(raw_output);

很不幸,这个表格的HTML/CSS并不是很好。我可以使用jQuery .css重写大部分内容,但更快速和实用的解决方案就是添加一个水平滚动条,使我能够增加表格的间距。


请发布您遇到问题的代码,并明确告诉我们具体的问题是什么。是否出现异常或其他错误? - Tae-Sung Shin
已编辑并添加了图片。我尝试了overflow: scroll等方法,但都没有成功。我在想问题是否出在jquery.mobile.css和data-role页面上。 - Bob Rob
当您使用overflow时,是否设置了元素的宽度?我仍然认为我们可以更好地帮助您处理代码。您能否发布您的代码(HTML)? - Tae-Sung Shin
至于屏幕设计,您真的认为在移动设备中需要包含桌面的所有列吗?您可以隐藏一些列和列内容,因为它们在移动设备的表格视图中看起来并不好看。 - Tae-Sung Shin
是的,我将宽度设置为设备宽度。我不确定 Webkit 是否支持滚动条。感谢您迄今为止的帮助。 - Bob Rob
3个回答

0

0
尝试将表格放入一个div中,并将div的css设置为"overflow: auto"或"overflow: scroll"。如果您只想在一个方向上滚动,可以将"overflow"更改为"overflow-x"或"overflow-y"。 "Scroll"会显示一个禁用的滚动条,即使没有溢出; "auto"不会显示任何内容,如果没有溢出,但一旦有溢出就会显示滚动条。

style="overflow: scroll" 在我的桌面浏览器上运行得非常完美,但在移动端的 Webkit 上却无法正常工作(没有滚动条出现,也无法滚动)。 - Bob Rob
哦,我以前从来没有为移动设备编程过...我上网搜了一下,找到了一些关于ScrollView或"android:scrollbars"属性的文章;你试过其中任何一种吗? - codecraftnap
但是关于在iOS浏览器中无法显示overflow、overflow-x、overflow-y的问题,您有什么想法吗? - SaurabhLP

-1
看了你的图片,我不建议在你的表格中使用水平滚动,因为屏幕已经显得很糟糕和不专业了。最好在单独的页面上显示课程的所有细节,例如课程编号、时间、可能的讲师(也许都在一列中)和按钮。点击行或按钮将导致其详细信息的显示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接