Absolute position with table-layout: fixed takes up space

Question

I have a fake table (divs rendered as a table). There is only one row with 6 cells. The last one of them i set to position: absolute, and the table is set to table-layout: fixed. Now the plan is to have the 5 first cells take up 20% each and the last one taking up no space. (as it needs to be moved outside of the box).

For some reason the table-layout: fixed also counts in the cell with position absolute meaning that each cell is given around 16% each.

The thing is that I need to be able to use the same css if the table all the sudden goes to 10 (+1) etc.

I have made a fiddle showing off the issue here. https://jsfiddle.net/nxy0d023/

This is my css (simplified)

.table {
    display: table;
    width: 100%;
    position: relative;
    table-layout: fixed;
}

.table div {
    display: table-cell;
    height: 10px;
}

.table .last {
    position: absolute;
    left: 0;
    top: 20px;
    width: 20px;
}

It is possible that I set each cell to a size if needed but that does not work sadly.

Answer 1

You can add width: 100% to the .table div.

jsFiddle