CSS Navigation with x Number of Tabs having same padding

Question

I am trying to figure out a certain layout with css.

[..tab1 random text..][..tab2 more random text..][..tab3 other random text..][..tab4..][..tab5..]

These are the requirements:

• All tabs are inside a div with fixed width.
• Tabs should not expand over that div, but should fill it out.
• Number of tabs can vary.
• Each Tab has unknown width (depends on text inside).
• All Tabs should share the same padding (space from outer most letters to inner border of tab should be the same, represented by the ".." above). This padding does not have to be fixed but should be the same among the tabs.
• No Calculations. All should work without modifying the css if one ore more tabs are added or removed.

I tried it with tables:

<table>
    <tr>
        <td>Tab1</td>
        <td>Tab 1 Space</td>
        <td>Tab 2 more Space</td>
        <td>Tab 3 even more Space</td>
        <td>Tab 4</td>
    </tr>
</table>

(fiddle)

The Problem I face is, that the padding varies based on width of the table and number of tabs.

Answer 1

IF I understand all of the constraints correctly, this is easily accomplished with the table and table-cell display properties.

Set your containing div width:

.container {
width: 800px;
}

then set your ul to have the table display:

ul {
display: table;
width: 100%;
}

finally, set your li's to be table-cells:

li {
display: table-cell;
}

See the full example: http://codepen.io/anon/pen/IfbHs

Answer 2

remove the width for table it will be perfect

http://jsfiddle.net/SSq7A/2/

table {
    border-spacing: 1px;
}

td {
    padding:10px;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
}