CSS 使表格 100% 的最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19045522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to make table 100% of max-width
提问by Noah Goodrich
Given the following for an email template:
鉴于电子邮件模板的以下内容：
<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>
The table will be exactly 700px wide is what is needed. However, because its entirely fixed width, it can't resize on devices with less than 700px width. But if I modify the td element to this:
表格的宽度正好是 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>
Then the table is only ~100px wide.
那么桌子只有 ~100px 宽。
How would I reorder the CSS to make it so that the table is 700px but resizes as the viewport grows smaller?
我将如何重新排序 CSS 以使表格为 700 像素，但随着视口变小而调整大小？
回答by Pablo
回答by OZZIE
I had the same issue it was due to that I had the bootstrap class "hidden-lg" on the table which caused it to stupidly become display: block !important;
我遇到了同样的问题，因为我在桌子上有引导程序类“hidden-lg”，这导致它愚蠢地变成了 display: block !important;
I wonder how Bootstrap never considered to just instead do this:
我想知道 Bootstrap 是如何从未考虑过这样做的：
@media (min-width: 1200px) {
.hidden-lg {
display: none;
}
}
And then just leave the element whatever display it had before for other screensizes.. Perhaps it is too advanced for them to figure out..
然后将元素保留为其他屏幕尺寸之前的任何显示.. 也许这太先进了，他们无法弄清楚..
Anyway so:
无论如何：
table {
display: table; /* check so these really applies */
width: 100%;
}
should work
应该管用
回答by Svetlin Nakov
I have a very well working solution for tables of max-width: 100%.
Just use word-break: break-all;for the table cells (except heading cells) to break all long text into several lines:
我有一个非常有效的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>
This will render like this (when the screen width is limited):
这将呈现如下（当屏幕宽度有限时）：
回答by Danny Beckett
I had to use:
我不得不使用：
table, tbody {
width: 100%;
}
The tablealone wasn't enough, the tbodywas also needed for it to work for me.
该table独显不够，tbody还需要为它为我工作。
回答by zazzyzeph
max-width is definitely not well supported. If you're going to use it, use it in a media query in your style tag. ios, android, and windows phone default mail all support them. (gmail and outlook mobile don't)
max-width 绝对没有得到很好的支持。如果您打算使用它，请在您的样式标签的媒体查询中使用它。ios、android 和 windows 手机默认邮件都支持它们。（gmail 和 Outlook 移动版没有）
http://www.campaignmonitor.com/guides/mobile/targeting/
http://www.campaignmonitor.com/guides/mobile/targeting/
Look at the starbucks example at the bottom
查看底部的星巴克示例
回答by Sunil Kumar
Use this :
用这个 ：
<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>
