Question

我有一个包含各种长度文本的单元格的表格。所有表格单元的宽度必须相同。如果这意味着截断长词或强制中断长词，那就没关系。

我无法弄清楚如何让它发挥作用。

这适用于内部客户端应用程序，因此只需要在IE6和IE7中工作。

下面是一个示例页面。包含onereallylongword的单元格是违规的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>

Answer 1

只要你修改表格本身的宽度并设置table-layout属性，这很简单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>

        </tr>
    </table>
</body>
</html>

我已经在IE6和7中对此进行了测试，看起来效果很好。

Answer 2

如果你想在新行中正确包装长文本，那么在你的表id中调用使用css属性table-layout:fixed;，否则只是css不能破坏新行中的长文本。

Answer 3

Stack Overflow通过使用DIV和overflow-x:auto解决了长行代码的类似问题。 CSS无法为你分解单词。

Answer 4

试试这个：

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;

Answer 5

我意识到你需要一个IE6 / 7的解决方案，但我只是把它扔给别人。

如果你不能使用table-layout: fixed并且你不关心IE＆lt; 9这适用于所有浏览器。

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}

Answer 6

<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>

Answer 7

尝试td {background-color:white}

它只适用于我不想被前一列的长文本踩踏的专栏。

表格单元格宽度 - 固定宽度，包装/截断长单词

7 个答案: