1. 首頁
  2. 問答
  3. 表上溢出HTML

表上溢出HTML

2017-04-25 71 views
0

我目前正在創建一個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

回答

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

來源

2017-04-25 18:51:48

1

你需要的是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

1

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

相關問題

 相關問題