Меню
- Главная
- Скрипты
- Шаблоны сайта
- Книги
- Фон для сайта
- Анимированные картинки
- Лохотроны и кидалово в интернете
- Статьи
Партнерские программы:
- Заработок на соцсетях
- разные


Реклама




Информация
Обо всех новых добавлениях на сайт вы можете узнать подписавшись в
_________
Яндекс.Метрика


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


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