HTML表格宽度设置为100%时，长文本无法正常显示。

Question

我有以下结构。

<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 占用 60px，第二个 td 占用剩下的 100%，但是当我有一些没有空格和破折号的长文本时，表格会变得比 100% 更大。 如何在一行或多行上显示不可断行的文本（两种方式都可以），并保持表格在屏幕的 100%？ 我尝试使用 overflow-hidden 来修复它，但没有效果。 以下是问题的截图：链接

- Дамян Станчев

Answer 1

在你的CSS中设置table-layout : fixed 或者 <table style='table-layout : fixed'>，这应该可以解决它。

这里有一个代码示例。看看吧。

- Ashwin Krishnamurthy

Answer 2

有一种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>

附注：在IE 5.5+，Firefox 3.5+和WebKit浏览器（如Chrome和Safari）中支持word-wrap。

- Simone

Answer 3

尝试以下操作：

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

- Timothy Groote