Границы стола не выстраиваются правильно в Firefox

Question

Каждая строка таблицы имеет верхнюю границу 1px, и по какой-то причине первая ячейка, отличная от заголовка в таблице, получает дополнительный бит пространства (кажется, 1px), который сбрасывает граница между строками. Я знаю, чтобы исправить это, я могу удалить крах-крах: свернуть - но я действительно хочу понять, почему это происходит.

Многие из моих других таблиц имеют примерно такой же макет, и в Firefox нет проблем с границами.

Fiddle: https://jsfiddle.net/0nL653pj/1/

CSS:

table { 
    box-sizing: border-box; 
    border-collapse: collapse; 
border-spacing: 0; 
} 

.fullWidth { 
    width: 100%; 
} 

.standardTable th { 
    background: #999; 
    border-right: 1px solid #fff; 
    border-bottom: 3px solid #fff; 
    color: #fff; 
    font-size: 10px; 
    font-weight: 600; 
    line-height: 1.5em; 
    padding: 2px 10px; 
    text-transform: uppercase; 
} 
th, td, caption { 
    font-weight: normal; 
    vertical-align: middle; 
    text-align: left; 
} 

.w100 { 
    width: 100px; 
} 
.center { 
    text-align: center; 
} 

.action-table tr:nth-child(2) td { 
    border-top: 1px solid transparent; 
} 
.action-table td.icon-cell { 
    line-height: 17px; 
} 
.action-table tr td { 
    border-top: 1px solid #d9d9d9; 
    height: 54px; 
    position: relative; 
} 
.action-table tr td { 
    border-top: 1px solid #d9d9d9; 
    height: 54px; 
} 
.standardTable td { 
    color: #444; 
    font-weight: 400; 
    font-size: 12px; 
    height: 43px; 
    padding: 0 10px; 
    vertical-align: middle; 
} 
.icon-element { 
    display: table; 
    vertical-align: middle; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
} 

HTML:

<table class="standardTable fullWidth action-table"> 
    <tbody><tr> 
     <th>Policy Name</th> 
     <th class="center w100">Earned YTD</th> 
     <th class="center w100">Used YTD</th> 
     <th class="center w100">Current Balance</th> 
     <th class="center">Action</th> 
    </tr> 


    <tr id="RowType-1"> 
     <td class="icon-cell icon-element"> 
      <div class="time-off-icon-wrapper"><span class="action-icon icon-vacation"></span></div> 
     fg Vacation Policy 
    </td> 
    <td class="center"> 
       <span class="unit-value">0.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
      <span class="unit-value">13.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
       <span class="unit-value">-13.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
    </td> 
</tr> 



    <tr id="RowType-2"> 
     <td class="icon-cell icon-element"> 
      <div class="time-off-icon-wrapper"><span class="action-icon icon-sick"></span></div> 
     Full Time Employee Sick Policy 
    </td> 
    <td class="center"> 
       <span class="unit-value">0.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
      <span class="unit-value">0.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
       <span class="unit-value">0.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
    </td> 
</tr> 



    <tr id="RowType-3"> 
     <td class="icon-cell icon-element"> 
      <div class="time-off-icon-wrapper"><span class="action-icon icon-other"></span></div> 
     Personal hours Policy 
    </td> 
    <td class="center"> 
       <span class="unit-value">50.00</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
      <span class="unit-value">2.50</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
       <span class="unit-value">47.50</span> 
     <span class="unit-label">hrs</span> 
    </td> 
    <td class="center"> 
    </td> 
</tr> 



<tr id="RowType-4"> 
    <td class="icon-cell icon-element"> 
     <div class="time-off-icon-wrapper"><span class="action-icon icon-holiday"></span></div> 
      Holiday Policy* 
     </td> 
     <td class="center"> 
      <span class="SecondaryText">n/a</span> 
     </td> 
     <td class="center"> 
      <span class="unit-value">0.00</span> 
      <span class="unit-label">hrs</span> 
     </td> 
     <td class="center"> 
      <span class="SecondaryText">n/a</span> 
     </td> 
     <td class="center"> 
     </td> 
    </tr> 


</tbody></table> 

Answer 1

По какой-то причине у вас есть это:

.icon-element { 
    display: table; 
    vertical-align: middle; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
} 

Вы сначала установить display: table, затем перезапишите его, установив его на display: flex. Есть ли конкретная причина, почему у вас есть одна ячейка, настроенная таким образом? Если вы установите для этой ячейки значение display: table-cell (или если вы просто удалите остальные элементы display), строки и их границы будут правильно выровнены.

Если вам нужна эта ячейка для размещения вложенной таблицы (гибкая или нормальная таблица), я предлагаю добавить вложенный div, у которого есть новый class, поэтому текущие ячейки таблицы останутся без изменений.