CSS 使表格 100% 的最大宽度
Posted
技术标签:
【中文标题】CSS 使表格 100% 的最大宽度【英文标题】：CSS to make table 100% of max-width 【发布时间】：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。
【参考方案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>
【讨论】：
以上是关于CSS 使表格 100% 的最大宽度的主要内容，如果未能解决你的问题，请参考以下文章