Ячейка таблицы с содержимым

Question

Я использую JQuery Mobile для отображения данных о продуктах, кто-то вроде этого:

<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="See">
        <thead>            
           <tr>
                <-- <th> with table heads -->
            </tr>
        </thead>
        <tbody>

            @foreach(Product in Model)
            {
                <tr>
                    <-- <td> with info of Products-->
               </tr>
            }
        </tbody>
</table>

Таблица "columntoggle".

Моя проблема в том, что Контент ячеек превышает ширину экрана, например, в браузере iOS, а JQuery Mobile усекает контент и не позволяет переместить страницу влево или вправо, чтобы увидеть контент.

Как я могу сказать JQuery Mobile, что они не обрезают контент и делают таблицу адаптивной, или ячейку с переносом слов.

Спасибо!...

Answer 1

Поместите таблицу в div и позвольте div прокручиваться, когда таблица выходит за границы div:

<div class="tableWrapper">
    <table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="See">
            <thead>            
               <tr>
                   <th>Col 1</th>
                   <th>Col 2</th>
                   <th>Col 3</th>
                   <th>Col 4</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                       <td>Col 1 Row 1 content</td>
                       <td>Col 2 Row 1 content</td>
                       <td>Col 3 Row 1 content</td>
                       <td>Col 4 Row 1 content</td>
                   </tr>
            </tbody>
    </table>
</div>

CSS:

.tableWrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Содержимое столбца автоматически переносится на несколько строк, и таблица остается внутри элемента div, пока столбцы больше не могут уменьшаться. В этот момент таблица становится шире, чем div, и появляется полоса прокрутки.

DEMO