Question

放上页面样本（和简单）表：

<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）head是列（！）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表正常？

Answer 1

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

包含大量列的大型表格不适合较小的屏幕，因此还有另一种称为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;}

DEMO

为什么简单的jQuery移动表显示转置？

1 个答案: