webew
Войти » Регистрация
 
HTML
CSS

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

31 января 2008, 14:10
Задача: создать кроссбраузерную таблицу, "резиновые" ячейки которой будут обладать свойством overflow:hidden

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

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

Решение предложил Peroon.

table td {
    height:25px; vertical-align:top;
}
div {
    position: relative;
}
div div {
    position: absolute; overflow: hidden; white-space: nowrap; width: 100%; border:1px solid red;
}
<table>
    <tr>
        <td>
            <div><div> First First First First First First First First First First First First First First Firs</div></div>
        </td>
        <td>
            <div><div>Second Second Second Second Second Second Second Second Second Second Second Second Second</div></div>
        </td>
    <td>
            <div><div>Third Third Third Third Third Third Third Third Third Third </div></div>
        </td>
    </tr>
</table>

Смотрим рабочий пример.

Проверено в:

  • IE 6,7;
  • FF 3;
  • Opera 9+;
  • Safari 3;
  • Chrome;

Ограничение: т.к. блоки выпадают из потока, ячейки нужно прописывать фиксированную высоту, а таблице явно указывать длину (100%, например).


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100