Пожалуйста, рассмотрите этот небольшой, но полный фрагмент 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: исправлено и использовало colgroup с cols и все виды, ничего, что я пробовал, убеждает IE в том, что я явно прошу его явно делать?
Если бы у меня были волосы, прежде чем начинать это, у меня не осталось бы никакого времени.
попробуй это,
<!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>
Надеюсь, что это имеет смысл.