宽度为 100% 的 Html 表格不适用于长文本答案

【问题标题】：Html table with width 100% does not work with long text宽度为 100% 的 Html 表格不适用于长文本
【发布时间】：2012-01-01 04:25:45
【问题描述】：

我有以下结构

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

第一个 td 占用 60 像素，第二个占用 100% 的其余部分，但是当我有一些没有空格和破折号的长文本时，表格会变得更大，然后是 100%。如何在一行或多行中显示不可破坏的文本（两种方式都可以接受）并将表格保持在屏幕的 100% 上？我试图用溢出隐藏来解决这个问题，但它没有效果。

问题截图如下：link

【问题讨论】：

标签： html css html-table

【解决方案1】：

有一个 CSS3 属性 word-wrap:break-word; 可以满足您的需求。但不幸的是，它不适用于表格单元格。我认为您需要重新考虑您的结构，选择无桌子的设计。

我为你写了这个例子

<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-wrap 支持 IE 5.5+、Firefox 3.5+ 以及 Chrome 和 Safari 等 WebKit 浏览器。

【讨论】：

【解决方案2】：

尝试以下方法：

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

【讨论】：

【解决方案3】：

在你的 CSS 中设置 table-layout : fixed 或 <table style='table-layout : fixed'> 应该修复它。

这里是code sample。看看吧。

【讨论】：