我有一个简单的 react 表,目前以下列格式显示:
[1][2][3][4]
[1][2][3][4]
[1][2][3][4]
[1][2][3][4]
但我想添加一个媒体查询,以便在移动 View 中将其转换为以下格式:
[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>
最佳答案
添加这个 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>
关于javascript - 如何在使用 React 时将表格行转换为列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50801469/