0

放在页面示例（和简单）表上：

<table id="myTable">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
    </tr>
</tbody>
</table>

显示不出意外 - 标题是一行，内部是 trs - 行。看这个：

Column 1    Column 2    Column 3
Row 1 Column 1  Row 1 Column 2  Row 1 Column 3
Row 2 Column 1  Row 2 Column 2  Row 2 Column 3

然后尝试制作 jQuery 样式的表格 - 只需将 data-role="table" 添加到表格标签。惊喜 - 转置的表：1）头部是列（！）2）行是列。看这个：

Column 1Row 1 Column 1
Column 2Row 1 Column 2
Column 3Row 1 Column 3
Column 1Row 2 Column 1
Column 2Row 2 Column 2
Column 3Row 2 Column 3

这是默认行为吗？这是怎么回事？如何强制jQuery表正常？

4

1 回答 1

4

data-mode's默认情况下有两个' reflow，其中它将表格列折叠成堆叠的表示形式，看起来像每行的标签/数据对块。这种行为仅在移动设备中很明显，但是在桌面/平板电脑中，这看起来就像一张普通的桌子。

具有大量列的大表不适合较小的屏幕，因此还有另一种称为 as 的模式columntoggle允许用户切换列。

然而，为了在桌面浏览器中看到默认的表结构，要么摆脱data-role属性，要么设置data-role='none'

放data-mode="columntoggle"

<table data-role="table" id="my-table" data-mode="columntoggle">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Column 1</td>
            <td>Row 1 Column 2</td>
            <td>Row 1 Column 3</td>
        </tr>
        <tr>
            <td>Row 2 Column 1</td>
            <td>Row 2 Column 2</td>
            <td>Row 2 Column 3</td>
        </tr>
    </tbody>
</table>

添加以下样式以隐藏列按钮：

.ui-table-columntoggle-btn { display: none;}

演示

于 2013-04-19T08:34:27.907 回答