CSS使表格达到最大宽度的100%
Noa*_*ich 12 css html-table html-email width
给出了以下电子邮件模板:
<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>
该表将正好是700px宽是需要的.但是,由于其宽度完全固定,因此无法在宽度小于700px的设备上调整大小.但是如果我将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以使表格为700px,但随着视口变小而调整大小？
我有一个非常有效的解决方案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>
这将呈现如下（当屏幕宽度有限时）：
您需要使用：
table{
width:100%;
table-layout: fixed;
overflow-wrap: break-word;
}