Html 仅通过CSS直观地重新格式化表行

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

例如，如下所示的表行：

<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隐藏/显示它和其他长文本表格单元格，但这并不是最好的解决方案，原因很明显。如果可能的话，我只想通过CSS实现我的第二个标记示例，但到目前为止我还没有找到任何解决方案。有什么方法可以做到这一点，还是根本不可能做到这一点？

添加额外的表行意味着更改特定宽度的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的技巧

也许是你需要的？