Резиновые ячейки таблицы с overflow:hidden
31 января 2008, 14:10
Автор: Александр Бурцев [bur]
Задача: создать кроссбраузерную таблицу, "резиновые" ячейки которой будут обладать свойством overflow:hidden
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Решить такую задачу не так просто, как кажется на первый взгляд. Прописывание ячейкам таблицы стилевого свойства overflow:hidden не заработает ни в одном браузере так, как хотелось бы...
Для решения необходимо использовать комбинацию ячеек таблицы и вложенных ДИВов. CSS- и HTML-код смотрим ниже.
Решение предложил Peroon.
table td {
height:25px; vertical-align:top;
}
div {
position: relative;
}
div div {
position: absolute; overflow: hidden; white-space: nowrap; width: 100%; border:1px solid red;
}
height:25px; vertical-align:top;
}
div {
position: relative;
}
div div {
position: absolute; overflow: hidden; white-space: nowrap; width: 100%; border:1px solid red;
}
<table>
<tr>
<td>
<div><div> First First First First First First First First First First First First First First Firs</div></div>
</td>
<td>
<div><div>Second Second Second Second Second Second Second Second Second Second Second Second Second</div></div>
</td>
<td>
<div><div>Third Third Third Third Third Third Third Third Third Third </div></div>
</td>
</tr>
</table>
<tr>
<td>
<div><div> First First First First First First First First First First First First First First Firs</div></div>
</td>
<td>
<div><div>Second Second Second Second Second Second Second Second Second Second Second Second Second</div></div>
</td>
<td>
<div><div>Third Third Third Third Third Third Third Third Third Third </div></div>
</td>
</tr>
</table>
Смотрим рабочий пример.
Проверено в:
- IE 6,7;
- FF 3;
- Opera 9+;
- Safari 3;
- Chrome;
Ограничение: т.к. блоки выпадают из потока, ячейки нужно прописывать фиксированную высоту, а таблице явно указывать длину (100%, например).
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
