css table : first column with fixed width

I'm trying to create a css table. This was working fine, until I started to set a fixed width for the first column.

So basically I have:

<div class="table" style="width:100%;">
    <div class="thead">
        <div class="table-row">
            <div class="table-cell" style="display:flex;align-items:center;min-width: 180px;max-width:180px;">Type</div>
            <div class="table-cell">Motif</div>
            <div class="table-cell">col3</div>
            <div class="table-cell">col4</div>
            <div class="table-cell">col5</div>
            <div class="table-cell">col6</div>
            <div class="table-cell">col7</div>
            <div class="table-cell">col8</div>
            <div class="table-cell">col9</div>
        </div>
    </div>
    <div class="tbody">
        <div class="table-row" ng-repeat="input in vm.inputs">
            <div class="table-cell" ng-mouseover="vm.hoverIn(input)" ng-mouseleave="vm.hoverOut(input)" style="display:flex;align-items:center;min-width: 180px;max-width:180px;">
                {{input.type}}
            </div>
            <div class="table-cell">{{input.reason}}</div>
            <div class="table-cell">{{input.cim10}}</div>
            <div class="table-cell">{{input.start | date:'dd/MM/yyyy' }}</div>
            <div class="table-cell">{{input.end | date:'dd/MM/yyyy'}}</div>
            <div class="table-cell">{{vm.computeDays(input.start, input.end)}}</div>
            <div class="table-cell">{{input.pending}}</div>
            <div class="table-cell">{{input.details}}</div>
            <div class="table-cell">{{input.comments}}</div>
        </div>
    </div>
</div>

with the following css:

div.table {
    display: table;
}

div.table > div.thead {
    display: table-header-group;
    background-color:lightgray;
}

div.table > div.tbody {
    display: table-row-group;
}

div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
    display: table-row;
}

    div.table > div.thead > div.table-row > div.table-cell {
        display: table-cell;
        font-weight: bold;
        padding: 3px 10px;
        border: 1px solid #999999;
    }

    div.table > div.tbody > div.table-row > div.table-cell {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
        height: 42px;
        text-align: left;
        vertical-align: middle;
    }

Now, the result is this:

As you can see the second column is no more aligned with the first one.

Solution

I think the problem is not the fixed width, but the display: flex; you're adding inline, it's overriding display: table-cell;.

You might want to use display: flex; in the inner content of your tab.

div.table {
    display: table;
}

div.table > div.thead {
    display: table-header-group;
    background-color:lightgray;
}

div.table > div.tbody {
    display: table-row-group;
}

div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
    display: table-row;
}

    div.table > div.thead > div.table-row > div.table-cell {
        display: table-cell;
        font-weight: bold;
        padding: 3px 10px;
        border: 1px solid #999999;
    }

    div.table > div.tbody > div.table-row > div.table-cell {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
        height: 42px;
        text-align: left;
        vertical-align: middle;
    }

<div class="table" style="width:100%;">
    <div class="thead">
        <div class="table-row">
            <div class="table-cell" style="min-width: 100px;max-width:180px;">Type</div>
            <div class="table-cell">Motif</div>
            <div class="table-cell">col3</div>
            <div class="table-cell">col4</div>
            <div class="table-cell">col5</div>
            <div class="table-cell">col6</div>
            <div class="table-cell">col7</div>
            <div class="table-cell">col8</div>
            <div class="table-cell">col9</div>
        </div>
    </div>
    <div class="tbody">
        <div class="table-row" ng-repeat="input in vm.inputs">
            <div class="table-cell" ng-mouseover="vm.hoverIn(input)" ng-mouseleave="vm.hoverOut(input)" style="min-width: 100px;max-width:180px;">
                {{input.type}}
            </div>
            <div class="table-cell">{{input.reason}}</div>
            <div class="table-cell">{{input.cim10}}</div>
            <div class="table-cell">{{input.start | date:'dd/MM/yyyy' }}</div>
            <div class="table-cell">{{input.end | date:'dd/MM/yyyy'}}</div>
            <div class="table-cell">{{vm.computeDays(input.start, input.end)}}</div>
            <div class="table-cell">{{input.pending}}</div>
            <div class="table-cell">{{input.details}}</div>
            <div class="table-cell">{{input.comments}}</div>
        </div>
    </div>
</div>