Резиновые табы
 

Появилась идея реализовать резиновые табы (как вкладки в браузере), но вот не могу понять, как на CSS реализовать следующее:

1. Допустим, есть некий блок с табами, таб имеет ширину 100px:


2. При переполнении блока, табы начинают ужиматься:


3. Если текст в табе не помещается, то он начинает переходить в "точки" (text-overflow: ellipsis). Вот как раз с этим шагом возникли проблемы, блок начинает выезжать за родительский, текст внутрь таба уходить не хочет. Вот так должно выглядеть в идеале:


Вот что набросал: http://jsfiddle.net/gszhxvp4/

Можно ли осуществить мою задумку с помощью CSS? А то в JS это описывать не хочется.

P.S.: флекс не предлагать, кучу вложенных тэгов не сувать. :)

Заранее благодарю за любую помощь и подсказки.

Ruslan_xDD,
http://jsfiddle.net/gszhxvp4/1/

рони, я так уже пробовал, первая строчка табов растягивается, а так быть не должно. :)

Те табы, которые не выходят за блок, они должны быть по 100px.


А когда выходят - тогда начинают сжиматься.

Всё с точностью, как вкладки браузера.

Грубо говоря, нужно, чтобы у табов было max-width: 100px

Вроде сам разобрался.

http://jsfiddle.net/gszhxvp4/4/

Как-то так.

Если есть ещё идеи - предлагайте.

Ruslan_xDD,
:)

рони, всё таки без кучи вложенных тэгов не обошлось. :) А во всём виной то, что ячейкам нельзя давать position: relative. :(