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 に答える