Question

我正在为客户编辑时事通讯，但我一直陷于此...

以下是我的表格示例

问题出在移动设备上

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

我希望它看起来像这样

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

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

谢谢！

Answer 1

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

我要在您的位置执行的操作是在包含图像的元素后添加另一个带有“ lorem ipsum”的td元素：然后您可以使用媒体查询隐藏一个或另一个。

Answer 2

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>

Answer 3

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

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

这个问题将深入探讨Bootstrap 3和Bootstrap 4的工作原理： Hiding elements in responsive layout?

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

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

3 个答案: