Tabellenränder nicht richtig in Firefox ausgerichtet

Question

Jede Zeile meiner Tabelle hat eine 1px Grenze und aus irgendeinem Grund die erste Nicht-Header-Zelle in der Tabelle bekommt ein extra bisschen Platz (1px scheint es), die die wirft Grenzlinie zwischen den Zeilen. Ich weiß, um das zu beheben, kann ich den Grenzkollaps entfernen: Zusammenbruch - aber ich möchte wirklich herausfinden, warum dies passiert ist.

Viele meiner anderen Tabellen haben ungefähr das gleiche Layout und es gibt keine Probleme mit den Rahmen in 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

Aus irgendeinem Grund Sie diese haben:

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

Sie zuerst die display: table überschreiben Sie es dann, indem Sie es auf display: flex setzen. Gibt es einen besonderen Grund, warum du diese eine Zelle so eingerichtet hast? Wenn Sie diese Zelle auf display: table-cell setzen (oder wenn Sie einfach die anderen display Elemente entfernen), werden die Zeilen und ihre Rahmen korrekt ausgerichtet.

Wenn Sie diese Zelle benötigen, um eine geschachtelte Tabelle (Flex oder normale Tabelle) zu enthalten, empfehle ich eine verschachtelte div, die Ihre neue class hat, so dass die aktuellen Tabellenzellen unverändert bleiben.