如何使用Jquery mobile將表格作爲響應樣式？

Question

如何使用Jquery mobile作爲響應樣式表？

目前我正在爲magento定製一個jquery移動主題。但表格不響應。當手機屏幕太小時，會出現水平滾動。

我從here以及jquery.mobile-1.0b3.min.css中添加了一個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們，

1. jquery.mobile-1.0b3.min.css
2. jQuery的1.6.2.min.js
3. jquery.mobile-1.0b3.min.js

我錯過了什麼嗎？

Answer 1

您可能會對爲JQM 1.3版本發佈的Responsive Tables和Responsive Grids感興趣。

Answer 2

有已經爲響應表視圖積極JQM插件，你可以在這裏找到：https://github.com/frequent/tableview

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

如果您需要更多的信息，你可以隨時問一個開發商，他是這個社區的活躍成員：https://stackoverflow.com/users/536768/frequent

警告：

實現需要兩個附加itional js文件+一個CSS。