» Форма входа

»Мoy-weB ver.4.1

» Статистика

Главная » 2008 » Октябрь » 12 » Резиновые ячейки таблицы с overflow:hidden

Резиновые ячейки таблицы с overflow:hidden
12.Окт.2008 | 20:43:13

Резиновые ячейки таблицы с 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>
Категория: Статьй и уроки | Просмотров: 600 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]