Question

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Responsive email</title>

        <style type="text/css">     

      body {margin: 10px 0; padding: 0 10px; background: #F9F2E7; font-size: 13px;}
      table {border-collapse: collapse;}
      td {font-family: arial, sans-serif; color: #333333;}

      @media only screen and (max-width: 480px) {
        body,table,td,p,a,li,blockquote {
          -webkit-text-size-adjust:none !important;
        }
        table {width: 100% !important;}

        .responsive-image img {
          height: auto !important;
          max-width: 100% !important;
          width: 100% !important;
        }
      }
    </style>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>
          <table border="0" cellpadding="0" cellspacing="0" align="center" width="640" bgcolor="#FFFFFF">
            <tr>
              <td bgcolor="#FFFFFF" style="font-size: 0; line-height: 0; padding: 0 0;" height="140" align="center" class="responsive-image">
                <img src="SplashScreen_WithRMBLogo_Font48_36_AgencyFB.png" width="660" alt="" />
              </td>
            </tr>
            <tr><td style="font-size: 0; line-height: 0;" height="30">&nbsp;</td></tr>
            <tr>
              <td style="padding: 10px 10px 20px 10px;">
                <div style="font-size: 20px;">Hey guys,</div>
                <br />
                <div>
                  Here is the summary report 
                </div>
              </td>
            </tr>
            <tr><td style="font-size: 0; line-height: 0;" height="1" bgcolor="#F9F9F9">&nbsp;</td></tr>
            <tr><td style="font-size: 0; line-height: 0;" height="30">&nbsp;</td></tr>          
            <tr>
                <td>
                    <div style="max-height: 300px; max-width: 640px; width: 640px; overflow-x: auto; overflow-y: auto">             
                        <table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">

                          <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
                          <tr>
                            <td style="padding: 0 10px 0 10px;">
                              <div style="font-weight: bold; font-size: 16px;">Moto Hello</div>
                              <div>
                                Hello moto 1111111111111111111111111111111111111111111111111
                              </div>
                            </td>
                          </tr>
                          <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
                        </table>        

                        <table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">                       
                          <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
                          <tr>
                            <td style="padding: 0 10px 0 10px;">
                              <div style="font-weight: bold; font-size: 16px;">Moto Ask</div>
                              <div>
                                How are you moto 22222222222222222222222222222222222222222222222222222222
                              </div>
                            </td>
                          </tr>
                          <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
                        </table>    

                        <table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">                       
                          <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
                          <tr>
                            <td style="padding: 0 10px 0 10px;">
                              <div style="font-weight: bold; font-size: 16px;">Moto Answer</div>
                              <div>
                                Cool thanks moto 33333333333333333333333333333333333333333333333333333
                              </div>
                            </td>
                          </tr>
                          <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
                        </table>                                    
                    </div>
              </td>
            </tr>
            <tr><td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td></tr>
            <tr>
              <td bgcolor="#A89C83">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr><td style="font-size: 0; line-height: 0;" height="15">&nbsp;</td></tr>
                  <tr>
                    <td style="padding: 0 10px; color: #FFFFFF;">
                       v1 Report
                    </td>
                  </tr>
                  <tr><td style="font-size: 0; line-height: 0;" height="15">&nbsp;</td></tr>
                </table>
              </td>
            </tr>           
          </table>
        </td>
      </tr>
    </table>
  </body>

以下是jsfiddle中的代码：http://jsfiddle.net/nq3Re/124/

如何让三个表水平堆叠？目前它们垂直堆叠。

表的数量不必只有三个，可以是N.

Answer 1

显示HTML表格相邻的解决方案，而不是让它们换行，而是使用水平滚动条。

CSS：

div.container {
  display: inline-block;
}

HTML：

<div style="white-space:nowrap">
  <div class="container">
    <table border="2">
      <tr>
        <td>test 1 111111111111111111111111111111111111111</td>
      </tr>
    </table>
  </div>

  <div class="container">
    <table border="2">
      <tr>
        <td>test 2 22222222222222222222222222222222222222</td>
      </tr>
    </table>
  </div>

  <div class="container">
    <table border="2">
      <tr>
        <td>test 3 33333333333333333333333333333333333333333333</td>
      </tr>
    </table>
  </div>
</div>

重要的是使用 display：inline-block 浮动内部div。外部（或包装）div必须具有 white-space：nowrap

结果如下：https://jsfiddle.net/9k8ns73f/

Answer 2

这可以通过浮动的div轻松完成：

<强> CSS：

div.container {
    float: left;
    box-sizing: border-box;
    text-align: center;
}

<强> HTML

<div class="container">
    <!-- Table or even just content here -->
</div>

<div class="container">
    <!-- Table or even just content here -->
</div>

<div class="container">
    <!-- Table or even just content here -->
</div>

您可以向.container添加任何必要的css ...如果需要，您还可以为每个div添加额外的css类。

Here是小提琴：

Answer 3

将它们显示为内联块：

 <div class="container" style="display: inline-block"></div>

HTML：并排放置表并具有自动水平滚动

3 个答案: