html - react : How to make collapse as column in a in mobile view

Question

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

我有一个看起来像这样的表:

我怎样才能使同一个表的行为在移动设备上查看时，<td>在<tr>将使用 <th> 按列顺序排序在每个表数据旁边，如下所示:

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

Answer 1

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

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