移动设备上的响应表溢出

Question

看看这张图片：

了解＆＃34;娱乐＆＃34;，＆＃34;周三：4：00-6：00 pm＆＃34;是否会溢出到列标题下的下一行？如何将单元格内容组织在同一列中？现在看起来很乱。我正在使用jQuery mobile的响应表默认实现。

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

我动态地附加了单元格内容。

Answer 1

在span中换行文字并仅在小屏幕上应用以下CSS。

@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