Unwanted Border CSS (Chrome & Firefox)

I've had a real search through the existing questions here, and I've trawled Google for hours looking for a solution - but it seems this issue is quite specific.

In a nutshell, I have a fairly large table that contains multiple rows (a person on each line). There's a single column in each row, which I "split" into multiple DIVs using W3.CSS. (I use DIVs instead of additional TD's because the width of each DIV is will be different for each person - sort of like a Gantt chart style workforce management system).

The problem I'm having is that specifically in Chrome (not IE or Edge), I'm experiencing this random margin:

I've used Chrome's Dev Tools to try to figure it out, and you can see from this snip that the whole row (whether it's the TD or one or the DIVs - I don't know) seems to be 30px high, yet the content is only 24px.

It's driving me nuts, so I would really appreciate any support - even if it's to tell me I'm missing something obvious! Coding wise, I'm only just past the point of beginner, so I'm open minded that I'm not doing this right!

<div class="w3-container" style="width: 100%; margin:auto; ">
<table id="php_siteid" style="width: 100%; border-spacing: 0; border-collapse: collapse;"> 
  <tr>
<td style="border-bottom: 3px #FFFFFF solid; padding: 0px; " class="<?php print rowClassChange($i); ?>">
    <div style="width: 100%;" class="w3-cell-row">
        <div style="width: 100px; padding-left: 10px;" class="w3-cell w3-left-align">
            <div class="w3-cell-row" style="width: 100%;">
                <div class="tooltip w3-cell" style="width: 100%;"><?php if (hasAccess("scheduler")) { ?><strong><span class="fakeLink" onclick="document.getElementById('id<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } else { include('inc/inc_agentsummary.php'); ?><strong><span class="fakeLink" onclick="document.getElementById('id_summary_<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } ?><span class="tooltiptext"><strong><?php print $agentLineDetails["agentname"] . "<BR>" . $shiftTime; ?></strong></span>
                </div>
            </div>
        </div>
        <div class="w3-cell w3-left-align w3-rest">
            <div class="w3-cell-row" style="width: 100%;">
                <div class="w3-cell w3-left-align" style="background-color: transparent; width: 10%;"></div>
                <div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
                <div class="w3-cell w3-left-align" style="background-color: #a32985; width: 15%; color: white; padding-left: 10px; border-left: 1px #E7E7E7 solid; border-right: 1px #E7E7E7 solid;">MFMT</div>
                <div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
                <div class="w3-cell w3-left-align" style="background-color: transparent; width: 35%;"></div>
            </div>
        </div>
    </div>
    <?php if (hasAccess("scheduler")) { include('inc/inc_agentweeklinks.php'); }  ?>
</td>
  </tr>
</table>
</div>

Thanks so much in advance - happy to provide more information/code if needed :)

Jamie

Solution

It's all about each browser default behavior. Chrome dose not set any value for vertical-align. Just define that property (In your case dosen't matter which value you will assign) to .w3-cell class which has that specific display value:

.w3-cell{
   display:table-cell;
   vertical-align:middle
}