如何像 html 中一样使两个表水平放置

Question

您好，我正在尝试将两个 table（一个带有图像）水平放置在同一条线上。我希望当屏幕变为移动设备时，左侧的 table 垂直位于右侧的上方。

  <table style="display: inline-block" cellpadding="0" cellspacing="0"
                                       border="0" width="100%">
                                    <tr>
                                        <td align="center" valign="top"
                                            style="background-color: #ffffff; padding-bottom: 0">
                                            <img src="#"
                                                 style=" height: auto; display: block; border: 0;">
                                        </td>
                                    </tr>
                                </table>


                                        <table style="display: inline-block" cellpadding="0" cellspacing="0"
                                               border="0" width="100%">
                                            <tr>
                                        <td align="left" valign="top"
                                            style="background-color: #ffffff; padding-bottom: 0">
                                            <p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
                                                <span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
                                                <br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
                                            </p>
                                        </td>
                                    </tr>
                                </table>

Answer 1

您的方向是对的，但是您需要去掉 width:100%，否则它们中的两个将无法并排放置在同一行中！

此外，我会使用 display:inline-table 而不是 display:inline-block。

table {
  display: inline-table;
  border-spacing: 0;
  border: 0;
}

th,td {
  padding: 0
}

<table>
  <tr>
    <td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
      <img src="#" style=" height: auto; display: block; border: 0;">
    </td>
  </tr>
</table>


<table>
  <tr>
    <td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
      <p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
        <span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
        <br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
      </p>
    </td>
  </tr>
</table>

Answer 2

您可以使用 flexbox 布局来完成此操作。首先，您可以将两个表都放在 div 中，并将 div display 属性设置为 flex (style="display: flex;")。这会将两个表 in-line 放在一起。

要使它们在移动设备或更小的设备上垂直堆叠，您可以将 div flex-wrap 属性设置为 wrap。这将导致表格垂直堆叠。检查下面的代码，最重要的是 div 标签。

<div style="display: flex; flex-wrap: wrap;">
  <table>
    <tr>
      <td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
        <img src="#" style=" height: auto; display: block; border: 0;">
      </td>
    </tr>
  </table>


  <table>
    <tr>
      <td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
        <p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
          <span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
          <br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
        </p>
      </td>
    </tr>
  </table>
</div>

如何像 html 中一样使两个表水平放置

How to make two tables horizontal on the same like in html

html

css

css-tables