宽度为 100% 的 Html 表格不适用于长文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8181870/
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
Html table with width 100% does not work with long text
提问by Дамян Станчев
I have the following structure
我有以下结构
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE HERE
</div>
</td>
</tr>
...
</table>
The first td takes 60px, the second one takes the rest of the 100%, but when I have some long text with no spaces and no dashes the table becomes larger then the 100%. How to display the non-breakable text in one line or on multiple lines (both ways are acceptable) and keep the table on 100% of the screen? I've tried to fix this with overflow-hidden but it has no effect.
第一个 td 占用 60px，第二个占用 100% 的其余部分，但是当我有一些没有空格和破折号的长文本时，表格会变得比 100% 大。如何在一行或多行中显示不可破坏的文本（两种方式都可以）并使表格保持在 100% 的屏幕上？我试图用溢出隐藏来解决这个问题，但它没有效果。
Here's a screenshot of the problem:link
这是问题的屏幕截图：链接
回答by Ashwin Krishnamurthy
Set table-layout : fixedin your css or <table style='table-layout : fixed'>that oughta fix it.
设置table-layout : fixed在您的 css 中或<table style='table-layout : fixed'>应该修复它。
Here is the code sample. Check it out.
这是代码示例。一探究竟。
回答by Simone
There is a CSS3 property, word-wrap:break-word;that does exactly what you need. But unfortunately it doesn't work with table cells. I think you need to rethink your structure, opting for a table-less design.
有一个 CSS3 属性，可以满足word-wrap:break-word;您的需求。但不幸的是它不适用于表格单元格。我认为您需要重新考虑您的结构，选择无表设计。
I wrote this example for you
我为你写了这个例子
<style>
section { /* your table */
display:block;
width:300px;
background-color:#aaf;
}
section:after {display:block; content:''; clear:left}
div { /* your cells */
float:left;
width:100px;
background-color:#faa;
word-wrap:break-word;
}
</style>
<section>
<div>Content.</div>
<div>Loooooooooooooooooooooooooooooooooooooooong cat.</div>
</section>
P.S: word-wrapis supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
PS：word-wrap支持IE 5.5+、Firefox 3.5+、Chrome、Safari等WebKit浏览器。
回答by Timothy Groote
try the following:
尝试以下操作：
<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE no longer HERE !
</div>
</td>
</tr>
...
</table>
