React：如何在移动视图中使 <td> 折叠为 <tr> 中的列

Question

我试图让我的网站在不同设备上看起来一致。

我有一个 table 看起来像这样：

如何使 table 的行为相同，以便在移动设备上查看时，<tr> 中的 <td> 将按照 <th> 的列顺序排序在每个 table 数据旁边，如下所示：

我正在用 React 制作网站，所以如果在 React 中有我不知道的方法，那就更好了

Answer 1

媒体查询在这里可能不会有效，因为您要更改实际 html。您可能希望使用 https://www.npmjs.com/package/react-breakpoints 之类的包来呈现不同的内容，具体取决于它是桌面设备还是移动设备。

Answer 2

能够通过媒体查询做到这一点：

/* set for mobile breakpoint */
@media (max-width: 1024px) {
    /* display th for desktop only, hide on mobile */
    .desktop {
        display: none;
    }
    
    /* arranges td as column in the tr */
    .mobile-flex {
        display: flex;
        width: 100%;
    }

    /* adds faux-headers on each td by reading "data-header" attribute of the td*/
    td:before {
    content: attr(data-header);
    display: block;
    font-weight: bold;
    margin-right: 10px;
    max-width: 110px;
    min-width: 110px;
    word-break: break-word;
    }
}

<table>
  <thead>
    <tr>
      <th class="desktop">Title</th>
      <th class="desktop">Author</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mobile-flex" data-header="Title">Sample book title 1</td>
      <td class="mobile-flex" data-header="Author">Sample author name 1</td>
    </tr>
    <tr>
      <td class="mobile-flex" data-header="Title">Sample book title 2</td>
      <td class="mobile-flex" data-header="Author">Sample author name 2</td>
    </tr>
  </tbody>
</table>

React：如何在移动视图中使 <td> 折叠为 <tr> 中的列

React: How to make <td> collapse as column in a <tr> in mobile view

html

css

mobile

css-tables

reactjs