如何使用 Jquery mobile 将表格样式设置为响应式？答案

【问题标题】：How to style table as responsive using Jquery mobile?如何使用 Jquery mobile 将表格样式设置为响应式？
【发布时间】：2012-12-18 10:10:23
【问题描述】：

如何使用 Jquery mobile 将表格样式设置为响应式？

目前我正在为 magento 定制一个 jquery 移动主题。但是表格没有响应。当手机屏幕太小时，水平滚动就来了。

我添加了来自 here 的 css 以及 jquery.mobile-1.0b3.min.css。

.ui-table {
   border: 0;
   border-collapse: collapse;
   padding: 0;
   width: 100%;
}
.ui-table th,
.ui-table td {
  line-height: 1.5em;
  text-align: left;
  padding: .4em .5em;
  vertical-align:top;
}
.ui-table th {
  font-weight: bold;
}
.ui-table caption {
  text-align:left;
  margin-bottom:1.4em;
  opacity:50%;
}

/* Add strokes between each row */
.table-stroke thead th {
  border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.table-stroke tbody th,
.table-stroke tbody td {
  border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}


/* Add alternating row stripes */
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
  background-color: #eeeeee; /* non-RGBA fallback  */
  background-color: rgba(0,0,0,0.04);
}
/* Add stroke to the header and last item */
.table-stripe thead th,
.table-stripe tbody tr:last-child {
  border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback  */
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

但是还是不行。我的 CSS 和 JS 是，

jquery.mobile-1.0b3.min.css
jquery-1.6.2.min.js
jquery.mobile-1.0b3.min.js

我错过了什么吗？

【问题讨论】：

看看这里：css-tricks.com/…。这不仅仅是关于造型，这里也应该做更多的工作......
对不起.. 此项目中不允许使用 jquery mobile 外的样式... :(
响应式设计与 jQuery 或 jQuery mobile 无关，因此请阅读文章，寻找其他解决方案（例如来自 Chris Coyier 的解决方案 - 他的解决方案仅与 CSS 有关！）。不要等待有人会在这里为您编写整个解决方案......

标签： php jquery html css jquery-mobile

【解决方案1】：

您可能对计划用于 JQM 1.3 版本的 Responsive Tables 和 Responsive Grids 感兴趣。

【讨论】：

【解决方案2】：

已经有一个用于响应式表格视图的活跃 jQM 插件，你可以在这里找到它：https://github.com/frequent/tableview

演示可以在这里找到：http://www.franckreich.de/jqm/tableview/demo.html

如果您需要更多信息，可以随时询问开发人员，他是该社区的活跃成员：https://stackoverflow.com/users/536768/frequent

警告：

此实现需要两个额外的 js 文件 + 一个 CSS。

【讨论】：