Web-Masteru.info

Резиновые ячейки таблицы с overflow:hidden

Каталог статей / HTML, CSS / Резиновые ячейки таблицы с overflow:hidden

Задача: создать кроссбраузерную таблицу, "резиновые" ячейки которой будут обладать свойством overflow:hidden.

Решить такую задачу не так просто, как кажется на первый взгляд. Прописывание ячейкам таблицы стилевого свойства overflow:hidden не заработает ни в одном браузере так, как хотелось бы...

Для решения необходимо использовать комбинацию ячеек таблицы и вложенных ДИВов.
CSS- и HTML-код смотрим ниже.

.div {
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>

Смотрим рабочий пример.

Проверено в:
- IE 6;
- Mozilla Firefox 1.5;
- Opera 9.1;

Автор: Александр Бурцев
Сайт автора: fastcoder.org

internet-technologies.ru


Комментарии пользователей:

2010-05-07 в 23:52 Написал: Михаил

Это, конечно, хорошо. Вот только как расположить блоки таким образом, без использования таблицы? Да и чтоб текст переносился, а не уходил за пределы блока при изменении окна бродилки.

Навигация

Авторизация

установка ремонт компьютеров