使用反应时如何将表格行转换为列

Posted 2023-03-06

【中文标题】使用反应时如何将表格行转换为列

【英文标题】：How to transform a table rows into columns while using react

【发布时间】：2018-11-20 22:11:40

【问题描述】：

我有一个简单的反应表，目前以以下格式显示：

[1][2][3][4]
[1][2][3][4]
[1][2][3][4]
[1][2][3][4]

但我想添加一个媒体查询，以便在移动视图中转换为以下格式：

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

问题是我无法让它工作。我搜索和搜索，发现唯一可能的解决方案是向每个表格单元格添加一组顺序 CSS 值，例如：

<td className="cell-one"> One </td>

.cell-one 
  order: 1;

但这仍然不起作用。逻辑就在那里，我可以看到一半，但我就是无法正确理解。任何有关如何实现这一目标的见解都将不胜感激！

<table className="table-container">
  <tbody>
    <tr className="row">
      <th className="header-row">First Name</th>
      <th className="header-row">Surname</th>
      <th className="header-row">Age</th>
      <th className="header-row">Town</th>
    </tr>
    <tr className="row">
      <td className="table-content">James</td>
      <td className="table-content">Stout</td>
      <td className="table-content">35</td>
      <td className="table-content">Camden</td>
    </tr>
    <tr className="row">
      <td className="table-content">Karen</td>
      <td className="table-content">Smith</td>
      <td className="table-content">40</td>
      <td className="table-content">Stevenage</td>
    </tr>
  </tbody>
</table>

【参考方案1】：

添加这个 CSS

   @media screen and (min-width: 480px) 
     tbody tr th 
        display: none;
    

    td, th 
        display: block;
    

    td[data-th]:before  
        content: attr(data-th);
        margin-right: 10px;
        font-weight: bold;
    

@media screen and (min-width: 480px) 
     tbody tr th 
        display: none;
    

    td, th 
        display: block;
    

    td[data-th]:before  
        content: attr(data-th);
        margin-right: 10px;
        font-weight: bold;
    

<table className="table-container">
  <tbody>
<tr className="row">
  <th className="header-row">First Name</th>
  <th className="header-row">Surname</th>
  <th className="header-row">Age</th>
  <th className="header-row">Town</th>
</tr>
<tr className="row">
  <td data-th="First name" className="table-content">James</td>
  <td data-th="Surname" className="table-content">Stout</td>
  <td data-th="Age" className="table-content">35</td>
  <td data-th="Town" className="table-content">Camden</td>
</tr>
<tr className="row">
  <td data-th="First name" className="table-content">Karen</td>
  <td data-th="Surname" className="table-content">Smith</td>
  <td data-th="Age" className="table-content">40</td>
  <td data-th="Town" className="table-content">Stevenage</td>
</tr>
  </tbody>
</table>

【讨论】：

请注意，我添加了最小宽度为 480px 的媒体查询，以便在 sn-p 中显示效果。您需要将其保持为 max-width: 480px 以使样式仅在移动设备中应用

谢谢你，但我也试过了，虽然它适用于大约 80% 的表格，但它错过了 "First Name Surname Age Town" 的标题行，但仍然保持一致，而我正在寻找的是： 名字 James 姓氏 Stout 年龄 35 岁 Town Camden 名字 Karen 姓 Smith 年龄 40 岁 Town Stevenage

ohhhh... 现在我得到了你想要的。让我试试看

检查这个答案，我在一个实时项目中使用过这个代码。没有给我任何问题。

做得很巧妙！非常感谢你！我不会自己得到这个！