Почему простой мобильный стол jQuery показан транспонированным?

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> 

Нет сюрприза, показывая - заголовок является строкой, ТРС внутри тела - строки. Посмотрите на это:

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-стиль - просто добавить данные-роль = «таблица» для таблицы тегов. Сюрприз - стол, перенесенный: 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 быть нормальной?

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