Главная » Полезные статьи » HTML-верстка » Резиновые ячейки таблицы с overflow:hidden
Распечатать статью

Резиновые ячейки таблицы с 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;

Источник: internet-technologies.ru 
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи