HTML5 JQM表问题

Question

当我使用data-role =＆＃34; table＆＃34;我的表转到两列，表头在最左边的列上重复。我希望标题保持在顶部的一行，因为表标题应该是。我需要修理什么？

左边是我希望它看起来像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>

Answer 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