Question

我需要将表格的设计转换为可在移动设备上方便地查看。该表可能包含许多行，其中单元格包含较长的文本以及数字和其他短数据，因此它太宽而无法以原始形式放入移动屏幕。我发现了一些使表格响应的方法（即：http://css-tricks.com/responsive-data-tables/），但它们都依赖于重新格式化表行以基本上成为一个列表。在我的情况下，这将是一个巨大的屏幕空间浪费，它会迫使用户滚动很多。所以我提出了将一个表格行可视化地扩展为两行或更多行的想法，其中具有更多内容的单元格自己获得单行，而具有更少内容的单元格可以彼此共享一行。

例如，像这样的表格行：

<tbody>
  <tr>
    <td>20%</td>
    <td>5002</td>
    <td class="longText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore</td>
    <td>
      <ul>
        <li>List 1</li>
        <li>List 2</li>
      </ul>
    <td>
      <a href="#">Some Link</a>
    </td>
  </tr>
<tbody>

应该在视觉上成为：

<tbody>
  <tr>
    <td>20%</td>
    <td>5002</td>
    <td>
      <ul>
        <li>List 1</li>
        <li>List 2</li>
      </ul>
    <td>
      <a href="#">Some Link</a>
    </td>
  </tr>
  <tr>
    <td class="longText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore</td>
  </tr>
<tbody>

解决方法是在HTML中添加第二行并根据查看器的屏幕大小隐藏/显示它和另一个＆＃34; longText＆＃34; -table单元格，但这不是＆＃ 39;出于显而易见的原因，最佳解决方案。如果可能的话，我想通过CSS实现我的第二个标记示例，但到目前为止我还没有找到任何解决方案。有没有办法做到这一点，还是只是不可能？

Answer 1

添加额外的表行意味着更改特定宽度的DOM：

(function() {
    if ($(window).width() <= 992) {
       //remove your table row
    }
    if ($(window).width() >= 992) {
       //add your table row
    }
});

但是，我认为这对您的目的来说是不切实际的，管理起来会困难得多，而且会变得错综复杂。我个人会在你的样式表中使用媒体查询来隐藏行的内容：

 <td class="longText hideme"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore</p></td>

 @media (max-width: 991px) { .hideme p {display:none} }

这是来自CSS Tricks的bit of reading

仅通过CSS可视地重新格式化表行

1 个答案: