Элементы таблицы с равной шириной, генерируемые динамически

Question

Я создаю вкладки, которые должны быть равны по ширине, она будет динамически (2-8 вкладок). Нет фиксированной ширины, полоса табуляции имеет ширину жидкости. Я пытался добиться этого через css, но не работал.

демо: http://codepen.io/anon/pen/JdbMwR

<div class="main"> 
<ul class="list-inline sub-cat-tabs"> 
    <li> 
    <div> 
     <a href="javascript:void(0)" class="active"><span>2014-2015 2014-2015</span></a> 
    </div> 
    </li> 
    <li> 
    <div> 
     <a href="javascript:void(0)" class=""><span>2015-2015</span></a> 
    </div> 
    </li> 
</ul> 
</div> 

Answer 1

Вы можете сделать это с CSS фиксированной сервировки стола, поддержка браузера: IE8 +

http://jsfiddle.net/gashvbp6/

.tabs { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.tabs li { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
}

<ul class="tabs"> 
 
    <li>item - long one</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</ul>