如何更改移动设备的表格列顺序

Posted 2023-03-05

技术标签:

【中文标题】如何更改移动设备的表格列顺序【英文标题】：How to change order of table column for mobile devices 【发布时间】：2019-10-19 02:46:25 【问题描述】：

我正在为客户编辑时事通讯，但我一直坚持...

这是我的表格示例

https://jsfiddle.net/xocrqwLs/

问题在于移动设备看起来像这样

|---------|
| [image] |
|  text   |
|---------|
|  text   |
| [image] |
|---------|

我希望它看起来像这样

|---------|
| [image] |
|  text   |
|---------|
| [image] |
|  text   |
|---------|

如何更改移动设备的表格列？

谢谢！

【问题讨论】：

附上整个 CSS 示例。您的代码不完整。这与引导程序有什么关系？你的 CSS 代码在哪里？还是你没有？这里是小提琴jsfiddle.net/xocrqwLs 【参考方案1】：

除非您使用 flexbox，否则您无法更改两个元素的显示顺序（表格有 display: table 而不是 display: flex）；此外，表格行为非常严格，无论如何都不允许这种灵活性，并且电子邮件平台兼容性不允许您用 flexbox 替换表格而没有严重的兼容性问题。

我会在你的位置做的是在包含图像的元素之后添加另一个带有“lorem ipsum”的td元素：然后你可以使用媒体查询隐藏一个或另一个。

【讨论】：

【参考方案2】：

如果您使用的是引导程序，则可以使用“隐藏”和“可见”显示属性。

例如： - 创建两个版本的表格：一个用于更大的屏幕，一个用于移动设备。 - 在大屏幕上，使用 hidden 隐藏小屏幕版本，并使用 visible 使大屏幕表格可见。 - 在移动屏幕上，使用 hidden 隐藏大屏幕版本，使用 visible 使移动版本的表格可见。

这个问题详细介绍了 Bootstrap 3 和 Bootstrap 4 的工作原理： Hiding elements in responsive layout?

有关它在 Bootstrap 4 中如何工作的更多信息： Missing visible-** and hidden-** in Bootstrap v4

【讨论】：

【参考方案3】：

table.info tr 
  display: flex;
  flex-direction: column;
  width: 100%;


table.info tr td,
table.info,
table.info tbody 
  display: block;
  width: 100%;

<table class="info">
  <th>
    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>
    </tr>

    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>

    </tr>
  </th>
</table>

【讨论】：

请在您的答案中添加解释。