使用CSS将表格宽度设置为最大宽度的100%

Question

使用CSS将表格宽度设置为最大宽度的100%

30

给定以下内容作为电子邮件模板:

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

那么表格仅有约100像素宽。

我应该如何重新排列CSS，使得表格的宽度为700像素但随着视口缩小而调整大小？

- Noah Goodrich

给第一个表格设置 width: 90%，给第二个表格设置 width: 100%，同时尽量避免使用内联样式。 - Mr_Green

1

我认为他必须使用内联样式，因为这是用于电子邮件模板的。 - jbrya029

在处理HTML电子邮件时，除非您不想支持忽略样式标签的Gmail，否则将样式内联是很重要的。 - ja408

7个回答

24

像这样

演示

css

table{
    width:100%;
}

- Falguni Panchal

@Noah - 如果你需要固定宽度，这也可以工作，你可能想把 <div style="width:100%; background:#F2F2F2"> 改为 <div style="width:700px; background:#F2F2F2">。 - Sunil Kumar

7

我有一个非常好的解决方案，可以处理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>

这将在屏幕宽度有限时呈现为以下样式：

- Svetlin Nakov

3

我遇到了同样的问题，这是因为我在表格上使用了 Bootstrap 类 "hidden-lg"，导致它变得非常愚蠢地变成了 display: block ! important;。我想知道为什么Bootstrap从来没有考虑过这样做：

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

然后在其他屏幕尺寸上保留元素原本的显示方式。也许对于他们来说这太高级了，他们无法理解。

总之，所以：

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

应该可以工作

- OZZIE

0

max-width并不是被很好地支持的属性。如果你要使用它，请在样式标签中使用媒体查询。iOS、安卓和Windows Phone默认邮件都支持此属性。（Gmail和Outlook移动版不支持）

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

请看底部的星巴克示例。

- zazzyzeph

0

我必须使用：

table, tbody {
    width: 100%;
}

仅有的table是不够的，我还需要tbody才能让它正常工作。

- Danny Beckett

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

- Sunil Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pablo · Accepted Answer

您需要使用：

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

演示