html - 仅通过 CSS 在视觉上重新格式化表格行

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 中添加第二行并根据查看者的屏幕大小通过 CSS 隐藏/显示它和另一个“longText”表格单元格，但由于显而易见的原因，这不是最佳解决方案。如果可能的话，我想只通过 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} }

这是一个bit of reading来自 CSS 技巧