Clever Geek Handbook

Responsive table overflow on mobile devices

Check out this image:

enter image description here

See how "Rest", "Wednesday: 4: 00-6: 00pm" flow to the next row below the column heading? How do I keep the contents of a cell in one column? It looks very messy at the moment. I am using jQuery for default flexible tables mobile apps.

<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 am adding cell content dynamically.

+3


source to share


1 answer


Wrap the text in span

and apply the below CSS, only on small 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

0


source






More articles:


All Articles