表のオーバーフロー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

答えて

関連する問題