CSS-Tabelle: erste Spalte mit fester Breite

Question

Ich versuche, eine CSS-Tabelle zu erstellen. Das funktionierte gut, bis ich anfing, eine feste Breite für die erste Spalte zu setzen.

Also im Grunde habe ich:

<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> 

mit folgendem 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; 
    } 

Nun ist das Ergebnis folgendermaßen aus:

Wie Sie die zweite sehen Spalte ist nicht mehr mit der ersten ausgerichtet.