表格 HTML 上的溢出答案

【问题标题】：Overflow on Table HTML表格 HTML 上的溢出
【发布时间】：2017-04-25 18:37:13
【问题描述】：

我目前正在创建一个 HTML 电子邮件，我正在尝试将其宽度限制在 600 像素左右。我正在用 HTML 动态生成一个表格 - 所以我需要能够在表格水平大于 600 像素时添加滚动条，这样它就不会在某些电子邮件客户端中被截断。问题是，我无法在包含内容的表格上显示水平滚动条：

<!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>

看图：

【问题讨论】：

标签： html css scrollbar overflow html-email

【解决方案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的客户端中，会出现整个表格，可能会弄乱电子邮件布局。但至少整个电子邮件及其所有数据应该是可读的。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：