Задача: создать кроссбраузерную таблицу, "резиновые" ячейки которой будут обладать свойством overflow:hidden
Решить такую задачу не так просто, как кажется на первый взгляд. Прописывание ячейкам таблицы стилевого свойства overflow:hidden не заработает ни в одном браузере так, как хотелось бы...
Для решения необходимо использовать комбинацию ячеек таблицы и вложенных ДИВов. CSS- и HTML-код смотрим ниже.
ВАЖНО! Приводимое ниже решение кроссбраузерно работает только для HTML 4.01 Transitional. При ином доктайпе вас могут ожидать самые разнообразные сюрпризы.
.div {
width:100%;overflow:hidden;white-space:nowrap;
border:1px solid red;
}
.div div {float:left;}
width:100%;overflow:hidden;white-space:nowrap;
border:1px solid red;
}
.div div {float:left;}
<table width="100%" border="1">
<tr>
<td width="30%">
<div class="div"><div>
First First First First First First First <br/> First First First First First First First First
</div></div>
</td>
<td width="40%">
<div class="div"><div>
Second Second Second Second Second Second Second Second Second Second Second Second Second
</div></div>
</td>
<td width="30%">
<div class="div"><div>
Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
</div></div>
</td>
</tr>
</table>
<tr>
<td width="30%">
<div class="div"><div>
First First First First First First First <br/> First First First First First First First First
</div></div>
</td>
<td width="40%">
<div class="div"><div>
Second Second Second Second Second Second Second Second Second Second Second Second Second
</div></div>
</td>
<td width="30%">
<div class="div"><div>
Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
</div></div>
</td>
</tr>
</table>
Смотрим рабочий пример.
Проверено в:
- IE 6;
- Mozilla Firefox 1.5;
- Opera 9.1;
Способ 2: от Peroon
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="position: relative;"><div style="position: absolute; overflow: hidden; white-space: nowrap; width: 100%;">Оооочень длинный текст</div></div>
</td>
<td width="500">111</td>
</tr>
</table>
<tr>
<td>
<div style="position: relative;"><div style="position: absolute; overflow: hidden; white-space: nowrap; width: 100%;">Оооочень длинный текст</div></div>
</td>
<td width="500">111</td>
</tr>
</table>
Работает кроссбраузерно, независимо от доктайпа. Ограничение: блок должен быть фиксированной высоты.
