表上溢出HTML

我目前正在创建一个HTML电子邮件，我试图限制它的宽度大约600像素。我在HTML中动态生成一个表 - 所以我需要能够添加滚动条，如果表水平地超过600像素，所以它不会在某些电子邮件客户端中断。问题是，我有麻烦了水平滚动条上的内容的表都显示了它：表上溢出HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title></title> 
    <style type="text/css"> 
     @media only screen and (min-width: 100px) and (max-width: 625px) { 
      td, 
      span { 
       font-size: 11px!important; 
      } 
      #tab td { 
       width: 40%!important; 
       word-break: break-all; 
       display: table-cell; 
      } 
     } 
    </style> 

</head> 

<body style="margin: 0; padding: 0; min-width: 100%!important; font:15px/21px 'Arial';"> 
    <!-- background table --> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable"> 
     <tr> 
      <td align="center" valign="top"> 

       <!-- table width setter --> 
       <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; padding-right: 10px; padding-left: 10px;" id="emailContainer"> 
        <tr> 
         <td align="center" valign="top"> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="emailHeader"> 

           <tr style="width:100%; height:30px;"> 
            <td> 
             &nbsp; 
            </td> 
           </tr> 

          </table> 
         </td> 
        </tr> 
        <tr> 
         <td align="center" valign="top"> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top:5px solid #fac22c;"> 
           <tr style="height:30px;"> 
            <td> 
             &nbsp; 
            </td> 
           </tr> 
           <!-- begin content --> 
           <tr> 
            <td align="center"> 
             <table cellspacing="0" cellpadding="9" border="1" style="width:auto; height:auto; background-color:#f6f6f7; border-color:#f2f2f2;" id="tab"> 
              <tbody> 
               <tr style="width:100%; height:auto;"> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test2</td> 
                <td style="width:10px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test3</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test4</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test5</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test6</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test7</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test8</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test9</td> 
                <td style="width:50px; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test10</td> 
                <td style="width:undefinedpx; height:auto; color:#232321; font:bold 12px/21px 'Arial';">Test11</td> 
               </tr> 
               <tr style="width:100%; height:auto;"> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">123123</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Some Person</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Unassociated Person</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Unassociated Person</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Something in the Works</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">The Gates Account</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">This isn't a main bucket</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">John Smith</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">576-123-5566</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">4/12/1992</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">3/4/1020</td> 
               </tr> 
               <tr style="width:100%; height:auto;"> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">123123</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Some Person</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Unassociated Person</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Unassociated Person</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">Something in the Works</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">The Gates Account</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">This isn't a main bucket</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">John Smith</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">576-123-5566</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">4/12/1992</td> 
                <td style="width:50px; height:auto; color:#232321; font: 12px/21px 'Arial';">3/4/1020</td> 
               </tr> 
              </tbody> 
             </table> 
            </td> 
           </tr> 
           <!-- begin content --> 
          </table> 
         </td> 
        </tr> 

       </table> 
       <!-- table width setter --> 
      </td> 
     </tr> 
    </table> 
    <!-- end background table --> 
</body> 

</html>

见图片：

来源

2017-04-25 Jim M

.overflow{ 
    width: 600px; 
    overflow-x: auto; 
}

来源

2017-04-25 18:51:48

你需要的是overflow。

看看下面的代码，看看它是如何工作的。将相同的过程应用于您自己的代码。

div.scroll { 
 
    background-color: #00FFFF; 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: scroll; 
 
} 
 

 
div.hidden { 
 
    background-color: #00FF00; 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
}

<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p> 
 

 
<p>overflow:scroll</p> 
 
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> 
 

 
<p>overflow:hidden</p> 
 
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

来源

2017-04-25 19:21:23

Overflow is not well supported in email clients，所以使用overflow: scroll;不会给你一致的结果。

然而我想不出另一种方式来实现在每一个电子邮件客户端的图，所以你可以尝试使用overflow，知道它不会工作无处不在：

<div style="overflow-y: auto;"> 
    <table border="0" cellpadding="0" cellspacing="0" ... > 
     Your data table 
    </table> 
</div>

在支持overflow的客户端中，您应该获得与图表非常接近的内容。

在客户端不支持支持overflow，整个表将出现，可能会搞乱电子邮件布局。但至少整个电子邮件及其所有数据应该可读。

来源

2017-04-25 20:37:31

表上溢出HTML

回答

相关问题