0

请考虑这个小而完整的 HTML 块：

<!DOCTYPE html >
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    span {overflow:hidden; white-space:nowrap;  }
    td {overflow:hidden; text-overflow:ellipsis}
    </style>
</head>
<body>
    <table cellspacing="0"  >
        <tbody>
            <tr>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 1</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 2</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 3</span></td> 
             </tr>
        </tbody>
    </table>
</body>
</html>

如果您在 Chrome 中渲染上述内容，您将看到我正在寻找的效果。

但是在 IE8 或 9 中渲染它，宽度和/或最大宽度将被忽略。

所以我的问题是如何让 IE 简单地让我明确指定单元格的宽度？

顺便说一句，我尝试了各种 table-layout:fixed 组合以及使用 colgroup 和 cols 等各种组合，我没有尝试过让 IE 相信我明确要求它明确做的事情？

如果我在开始之前有任何头发，我现在就不会剩下任何头发了。

4

1 回答 1

1

尝试这个，

<!DOCTYPE html >
<html>
<head>
    <title>Test</title>

    <style type="text/css">
   span
{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-wrap: normal;
    max-width: 30px;
    vertical-align: bottom;
}

    </style>
</head>
<body>
    <table cellspacing="0"  >
        <tbody>
            <tr>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap;"><span>column 1</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap;"><span>column 2</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap;"><span>column 3</span></td> 
             </tr>
        </tbody>
    </table>
</body>
</html>

希望它有意义..

于 2013-10-24T09:57:50.470 回答