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



Опубликовал admin
16 Окт, Вторник 2007г.



Программирование для чайников.