css表格：固定寬度的第一列

Question

我正在嘗試創建一個css表格。 這工作正常，直到我開始爲第一列設置固定寬度。

所以基本上我有：

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

與下面的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; 
    } 

現在，結果是這樣的：

正如你可以看到第二列不再與第一個對齊。