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

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

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

 

• Код CSS

.div {
      width:100%;overflow:hidden;white-space:nowrap;
      border:1px solid red;
}
.div div {float:left;}

 

• Код HTML

<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;

Автор: Александр Бурцев, http://fastcoder.org/

Font-size от xx-small до xx-large

05-01-2010

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее Комментарии: 4 Кол. просмотров: общее - 1141 сегодня - 0

История про CSS (часть II)

05-01-2010

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее Комментарии: 0 Кол. просмотров: общее - 927 сегодня - 0

Трюк с курсором

05-01-2010

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее Комментарии: 0 Кол. просмотров: общее - 1151 сегодня - 2

Необычное применение CSS: реализация эффекта rollover c помощью CSS

05-01-2010

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее Комментарии: 3 Кол. просмотров: общее - 1404 сегодня - 1

Сокращенные команды в CSS

05-01-2010

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее Комментарии: 0 Кол. просмотров: общее - 1150 сегодня - 0