HTML5 JQM 表问题答案

【问题标题】：HTML5 JQM Table IssueHTML5 JQM 表问题
【发布时间】：2017-08-13 05:22:50
【问题描述】：

当我使用 data-role="table" 时，我的表格分为两列，表格标题在最左侧的列中重复出现。我希望标题保持在顶部的一行中，就像表格标题一样。我需要解决什么问题？

左边是我希望它在 JQM 格式下的样子，右边是这个样子，但我不知道为什么会这么奇怪。

代码：

<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-inline="true">
                <h4>Hole Info</h4>
                <table data-role="table">
                    <thead>
                        <tr>
                            <td> </td>
                            <td>Rating/Slope</td>
                            <td>Hole 1</td>
                        </tr>
                    </thead>                   
                    <tbody>
                        <tr>
                            <td>Blue</td>
                            <td>70.1/121</td>
                            <td>420 yds</td>
                        </tr>
                        <tr>
                            <td>White</td>
                            <td>68.7/119</td>
                            <td>395 yds</td>
                        </tr>
                        <tr>
                            <td>Green</td>
                            <td>67.0/113</td>
                            <td>370 yds</td>
                        </tr>
                        <tr>
                            <td>Par</td>
                            <td> </td>
                            <td>4</td>                                
                        </tr>
                        <tr>
                            <td> </td>
                            <td>Handicap</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>Red</td>
                            <td>68.0/112</td>
                            <td>290 yds</td>
                        </tr>
                        <tr>
                            <td>Par</td>
                            <td> </td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>

【问题讨论】：

您能否发布（或链接到）问题的屏幕截图以及适用于表格的任何自定义 CSS？您是否尝试过切换到列切换模式并查看问题是否仍然存在？
column-toggle 使它看起来像左图。桌子上没有 css。

标签： jquery html jquery-mobile html-table

【解决方案1】：

添加 class="ui-responsive" 以使用默认断点进行回流，并将 thead 中的单元格更改为 th 而不是 tr 元素：

<table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
        <tr>
            <th> </th>
            <th>Rating/Slope</th>
            <th>Hole 1</th>
        </tr>
    </thead>

DEMO

更新：

完全摆脱回流：

<table data-role="table" data-mode="">

DEMO

【讨论】：

问题仍然存在。你的 jsfiddle 甚至有问题。
@justin，仅当您将窗格调整为较小时。如果您在小提琴中使输出窗格更宽，您将看到表格在 2 个视图之间自动更改，就像它设计的那样。如果您希望始终使用列视图，请设置 data-mode=""：查看我的更新答案。