Table header height different from chrome to firefox in grid layout - css

Question

example pen:
https://codepen.io/backit/pen/zJmxqm
here's the html:
<div class="view-content">
<main class="building-phonebook">
<header>This is header</header>
<table class="building-phonebook-table building-phonebook-table-employees">
<tr>
<th colspan="3">Employees</th>
</tr>
<tr>
<td><strong>Name and Surname</strong></td>
<td><strong>Telephone</strong></td>
<td><strong>Office/Info</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Administration<strong></td>
</tr>
<tr>
<td colspan="3"><strong>Technicians<strong></td>
</tr>
<tr>
<td>name surname1</td>
<td>1234</td>
<td>roomA</td>
</tr>
<tr>
<td>name surname 2</td>
<td>4321</td>
<td>roomB - roomC</td>
</tr>
<tr>
<td colspan="3"><strong>Others Employeees<strong></td>
</tr>
<tr>
<td>name surname 3</td>
<td>5463 - 5478</td>
<td>133</td>
</tr>
<tr>
<td>name surname 4</td>
<td>5468 - 4569 - 213546879</td>
<td>215</td>
</tr>
</table>
<table class="building-phonebook-table building-phonebook-table-labs" >
<tr><th colspan="2">Labs</th></tr>
<tr>
<td><strong>Name</strong></td>
<td><strong>Telephone</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Labs type 1<strong></td>
</tr>
<tr>
<td>lab 1</td>
<td>4712</td>
</tr>
<tr>
<td>lab 2</td>
<td>4568</td>
</tr>
<tr>
<td colspan="3"><strong>Other Laboratories<strong></td>
</tr>
<tr>
<td>labs banana</td>
<td>7841</td>
</tr>
<tr><td colspan="3"><strong>Services<strong></td></tr>
</table>
</main>
css:
.view-content{
width: 400px;
}
/**
* Building Phonebook
*/
.building-phonebook-table tr td:nth-child(2),
.building-phonebook-table tr td:nth-child(3){
max-width:100px;
}
.building-phonebook-table th{
background:purple;
height:20px;
line-height:20px;
overflow: hidden;
color:#fff;
}
.building-phonebook-table th, .building-phonebook-table td{
height:20px;
line-height:20px;
}
.building-phonebook-table{
margin: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0;
}
.building-phonebook header{
background: yellow;
}
/**
* Building-phonebook grid
*/
main.building-phonebook{
display: grid;
grid-template-areas:
"header header"
"main side"
"other other";
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-row-gap:2px;
grid-column-gap:2px;
}
.building-phonebook header{
grid-area: header;
}
.building-phonebook .building-phonebook-table-employees{
grid-area: main;
}
.building-phonebook .building-phonebook-table-labs{
grid-area: side;
}
if you browse by chrome it's ok, in firefox "Labs" header cell is higher than "employees".
As you see these are two tables side by side with grid layout.
I tried to set height, line-height, overflow, nothing works.
Ok maybe it's a firefox bug, i don't care, how may i solve this??
Many thanks.

Answer 1

Add align-self: start; to .building-phonebook-table-labs so it won't stretch to full cell-height:
.view-content {
width: 400px;
}
/**
* Building Phonebook
*/
.building-phonebook-table tr td:nth-child(2),
.building-phonebook-table tr td:nth-child(3) {
max-width: 100px;
}
.building-phonebook-table th {
background: purple;
height: 20px;
line-height: 20px;
overflow: hidden;
color: #fff;
}
.building-phonebook-table th,
.building-phonebook-table td {
height: 20px;
line-height: 20px;
}
.building-phonebook-table {
margin: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0;
}
.building-phonebook header {
background: yellow;
}
/**
* Building-phonebook grid
*/
main.building-phonebook {
display: grid;
grid-template-areas: "header header" "main side" "other other";
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-row-gap: 2px;
grid-column-gap: 2px;
}
.building-phonebook header {
grid-area: header;
}
.building-phonebook .building-phonebook-table-employees {
grid-area: main;
}
.building-phonebook .building-phonebook-table-labs {
grid-area: side;
align-self: start;
}
<div class="view-content">
<main class="building-phonebook">
<header>This is header</header>
<table class="building-phonebook-table building-phonebook-table-employees">
<tr>
<th colspan="3">Employees</th>
</tr>
<tr>
<td><strong>Name and Surname</strong></td>
<td><strong>Telephone</strong></td>
<td><strong>Office/Info</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Administration<strong></td>
</tr>
<tr>
<td colspan="3"><strong>Technicians<strong></td>
</tr>
<tr>
<td>name surname1</td>
<td>1234</td>
<td>roomA</td>
</tr>
<tr>
<td>name surname 2</td>
<td>4321</td>
<td>roomB - roomC</td>
</tr>
<tr>
<td colspan="3"><strong>Others Employeees<strong></td>
</tr>
<tr>
<td>name surname 3</td>
<td>5463 - 5478</td>
<td>133</td>
</tr>
<tr>
<td>name surname 4</td>
<td>5468 - 4569 - 213546879</td>
<td>215</td>
</tr>
</table>
<table class="building-phonebook-table building-phonebook-table-labs" >
<tr><th colspan="2">Labs</th></tr>
<tr>
<td><strong>Name</strong></td>
<td><strong>Telephone</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Labs type 1<strong></td>
</tr>
<tr>
<td>lab 1</td>
<td>4712</td>
</tr>
<tr>
<td>lab 2</td>
<td>4568</td>
</tr>
<tr>
<td colspan="3"><strong>Other Laboratories<strong></td>
</tr>
<tr>
<td>labs banana</td>
<td>7841</td>
</tr>
<tr><td colspan="3"><strong>Services<strong></td></tr>
</table>
</main>
</div>