取决于屏幕尺寸的动态表格布局...>

Posted 2023-03-06

【中文标题】取决于屏幕尺寸的动态表格布局...>

【英文标题】：Dynamic Table Layout dependng on Screen Size...>

【发布时间】：2022-01-10 11:51:43

【问题描述】：

我正在尝试根据屏幕尺寸以两种不同格式呈现的表格，我想知道什么最适合这项工作：

表 弹性 网格 Flex 和网格的结合 以上都不是，只是使用大量带有类和 ID 的 Div。

Table 的内容将通过 Node js 后端的 JS 动态更新并发送回客户端，因此我需要先正确获取结构和 css。

我试图在平板电脑和更宽的屏幕上实现这一点：

这在移动屏幕上：

表格在宽屏模式下是直截了当的，但我不确定如何让 Col2 和 Col4 相互重叠。 我怀疑将 Col3 移动到 Col2 前面可以使用 Flex 使用 'order: 2' Col3 和 Col2 的 'order: 3' 来完成。

可以使用媒体查询更改布局吗？如果可以，如何做到这一点？

如果有帮助，很乐意使用一些 javascript，但不确定 JS 是否可以帮助媒体查询。

这是正常格式的表格代码笔：https://codepen.io/Mickael/pen/MWEarKN

我现在只是使用站立的 Table html：

<tr>
  <td>5</td>
  <td>Lando Norris</td>
  <td class="drv_num">4</td>
  <td>McLaren F1 Team</td>
  <td>153<span style="visibility: hidden">.0</span></td>
</tr>

这里有一个使用 Divs 的有用答案：

Making table content responsive to screen size

但问题在于，它只是将所有内容相互叠加并且不显示标题。

任何帮助或带有一些代码的指针让我开始都会有很大帮助。 干杯， M.

【参考方案1】：

我已经整理好了。答案是 Flex！

如果您将浏览器窗口的宽度减小到最小宽度，它将整齐地为驾驶员和团队堆叠行！

我在表格格式方面还有一些工作要做，比如计算表格的宽度。 （欢迎提出更多建议。）

这段代码展示了在我的第一篇文章中使用 Divs 而不是 Table 格式如何适用于我想要的格式而不是使用表格：

<div class="table-drivers table-drivers__row">
    <div id="" class="drv-rank">1</div>
    <div id="" class="drv-num">33</div>
    <div class="drv-team__combo">
        <div id="" class="drv-name">Max Verstapen</div>
        <div id="" class="drv-team">Red Bull Racing</div>
    </div>
    <div id="" class="drv-poles">9</div>
    <div id="" class="drv-wins">9</div>
    <div id="" class="drv-points">351.5</div>
</div>

This is all setup in Codepen，如果将来可以帮助某人。

【讨论】：

感谢您的反馈。我将提出第二个问题。至于那里的代码，我说的是rando，但它是相关的......在第一篇文章中，我展示了我如何使用表格和sscond帖子显示行，我如何将其更改为一组Divs而不是相同的结果，这与我如何设法使用 flex 和 Divs 来使格式正常工作有关。