title: Responsive table overflow on mobile
body: <p>Check out this image:</p>
  
  <p><img src="https://i.stack.imgur.com/RjV6z.png" alt="enter image description here"></p>
  
  <p>See how "Recreation", "Wednesday: 4:00-6:00pm" are spilling over into the next line under the column header? How do I keep the cell contents organized in the same column? It just looks very messy at the moment. I'm using jQuery mobile's default implementation of responsive tables.</p>
  
  <pre><code>&lt;table data-role="table" class="ui-responsive"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Activity Type&lt;/th&gt;
        &lt;th&gt;Time&lt;/th&gt;
        &lt;th&gt;Contact&lt;/th&gt;
        &lt;th&gt;Address&lt;/th&gt;
        &lt;th&gt;Website&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id="tbody"&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I'm appending the cell contents dynamically.</p>