css - Responsive table overflow on mobile -

css - Responsive table overflow on mobile -

check out image:

see how "recreation", "wednesday: 4:00-6:00pm" spilling on next line under column header? how maintain cell contents organized in same column? looks messy @ moment. i'm using jquery mobile's default implementation of responsive tables.

<table data-role="table" class="ui-responsive"> <thead> <tr> <th>activity type</th> <th>time</th> <th>contact</th> <th>address</th> <th>website</th> </tr> </thead> <tbody id="tbody"> </tbody> </table>

i'm appending cell contents dynamically.

wrap text in span , apply below css, on little screens.

@media (min-width: 35em) { .ui-table-reflow.ui-responsive td span, .ui-table-reflow.ui-responsive th span { width: 50%; text-align: left; float: right; } }

demo

css jquery-mobile