39

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

我想不出任何办法让它发挥作用。

这适用于内部客户端应用程序，因此只需要在 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>
4

7 回答 7

37

只要您固定表格本身的宽度并设置表格布局属性，这非常简单：

<!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 中对此进行了测试，它似乎工作正常。

于 2009-01-15T13:21:52.773 回答
21

如果您想在新行中正确包装长文本，那么在您的表 id 调用中使用 css 属性，table-layout:fixed;否则简单地 css 无法打破新行中的长文本。

于 2011-04-28T07:07:12.113 回答
17

Stack Overflow 通过使用 DIV 并拥有overflow-x:auto. CSS 不能为你分解单词。

于 2009-01-15T13:05:27.580 回答
12

试试这个：

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;
于 2012-07-21T12:32:38.183 回答
3 
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>
于 2015-06-01T12:14:41.677 回答
2

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

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

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
于 2013-03-18T17:10:51.127 回答
-7

尝试td {background-color:white}

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

于 2009-04-14T08:55:54.833 回答