table cell with content trucate

Question

I am using JQuery Mobile for show a data of Products, someone like this:

<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>

The table is "columntoggle".

My problem is that the Content of the cells exceed the width of the screen, for example, in a iOS browser, and JQuery Mobile truncate the content and do not allow move the page into left or right to see the content.

How I can say to JQuery Mobile that do not truncate the content, and make the table responsive, or the cell with a word wrap indicated.

Thanks!...

Answer 1

Put the table inside a div and allow the div to scroll when the table exceeds the div boundaries:

<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;
}

The column contents automatically wraps to multiple line and the table stays within the div until the columns can no longer shrink. At that point, the table becomes wider than the div and the scrollbar appears.

DEMO