CSS 使表格 100% 的最大宽度答案

【问题标题】：CSS to make table 100% of max-widthCSS 使表格 100% 的最大宽度
【发布时间】：2013-10-03 10:36:10
【问题描述】：

鉴于以下电子邮件模板：

<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 像素，但随着视口变小而调整大小？

【问题讨论】：

将width: 90% 给第一个表，width: 100% 给第二个表，并且尽量不要使用内联样式..
我认为他必须内联样式，因为它是用于电子邮件模板的
在处理 HTML 电子邮件时，内联样式很重要，除非您不想支持忽略样式标签的 Gmail。

标签： css html-table width html-email

【解决方案1】：

你需要使用：

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

Demo

【讨论】：

【解决方案2】：

像这样

demo

css

table{
    width:100%;
}

【讨论】：

@Noah - 如果您需要固定宽度，您可能需要将
更改为

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

我想知道 Bootstrap 怎么从来没有考虑过这样做：

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

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

无论如何：

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

应该工作

【讨论】：

【解决方案5】：

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

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

看看底部的星巴克例子

【讨论】：

【解决方案6】：

我不得不使用：

table, tbody {
    width: 100%;
}

仅table 是不够的，还需要tbody 才能为我工作。

【讨论】：

【解决方案7】：

使用这个：

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

【讨论】：