24

给定电子邮件模板的以下内容：

<style>
  @import url("http://fonts.googleapis.com/css?family=Open Sans");
</style>

<div style="width:100%; background:#F2F2F2">
  <table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
    <tr align="center" style="margin: 0; padding: 0;">
      <td>
        <table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
          <tr style="background-color: white;">
            <td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;">
              <p>Some content here</p>
              <span style="font-weight: bold;">My Signature</span><br/>
              My Title<br/>
              My Company<br/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

表格的宽度正好是 700 像素，这正是我们所需要的。但是，由于其宽度完全固定，因此无法在宽度小于 700 像素的设备上调整大小。但是，如果我将 td 元素修改为：

<td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;">
   <p>Some content here</p>
   <span style="font-weight: bold;">My Signature</span><br/>
   My Title<br/>
   My Company<br/>
</td>

然后表格只有~100px宽。

我将如何重新排序 CSS 以使表格为 700 像素但随着视口变小而调整大小？

4

7 回答 7

32

你需要使用：

table{
   width:100%;
   table-layout: fixed;
   overflow-wrap: break-word;
}

演示

于 2018-12-17T15:01:00.907 回答
24

像这样

演示

css

table{
    width:100%;
}
于 2013-09-27T07:58:24.077 回答
5

我有一个很好的工作表解决方案max-width: 100%。只需word-break: break-all;用于表格单元格（标题单元格除外）将所有长文本分成几行：

<!DOCTYPE html>
<html>
<head>
<style>

table {
  max-width: 100%; 
}
table td {
  word-break: break-all;
}

</style>
</head>
<body>

<table border="1">
  <tr>
    <th><strong>Input</strong></th>
    <th><strong>Output</strong></th>
  </tr>
  <tr>
    <td>some text</td>
    <td>12b6459fc6b4cabb4b1990be1a78e4dc5fa79c3a0fe9aa9f0386d673cfb762171a4aaa363b8dac4c33e0ad23e4830888</td>
  </tr>
</table>

</body>
</html>

这将呈现如下（当屏幕宽度受限时）：

于 2018-10-18T07:52:48.557 回答
3

我遇到了同样的问题，这是因为我在桌子上有引导类“hidden-lg”，导致它愚蠢地变成了 display: block !important;

我想知道 Bootstrap 是如何从未考虑过这样做的：

@media (min-width: 1200px) {
    .hidden-lg {
         display: none;
    }
}

然后将元素保留为其他屏幕尺寸之前的任何显示..也许它太先进了，他们无法弄清楚..

无论如何：

table {
    display: table; /* check so these really applies */
    width: 100%;
}

应该管用

于 2015-07-16T12:18:57.477 回答
0

max-width 绝对没有得到很好的支持。如果要使用它，请在样式标签的媒体查询中使用它。ios、android、windows phone 默认邮件都支持。（gmail和outlook mobile不支持）

http://www.campaignmonitor.com/guides/mobile/targeting/

看底部的星巴克例子

于 2013-09-27T15:21:41.397 回答
0

我不得不使用：

table, tbody {
    width: 100%;
}

table单独是不够的，还tbody需要它为我工作。

于 2019-02-07T14:00:38.387 回答
-3

用这个 ：

<div style="width:700px; background:#F2F2F2">
    <table style="width:100%;padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
        <tr align="center" style="margin: 0; padding: 0;">
            <td>
                <table style="width:100%;border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
                    <tr style="background-color: white;">
                        <td style=" padding: 10px 15px 10px 15px; color: #000000;">
                            <p>Some content here</p>
                            <span style="font-weight: bold;">My Signature</span><br/>
                            My Title<br/>
                            My Company<br/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
于 2013-09-27T08:02:08.977 回答