пример пера: https://codepen.io/backit/pen/zJmxqm вот 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;
}
если вы просматриваете по хрому, все нормально,в Firefox ячейка заголовка «Labs» выше, чем «сотрудники».
Как вы видите, это две таблицы рядом с разметкой сетки.
Я попытался установить высоту, высоту строки,переполнение, ничего не работает.
Хорошо, может быть, это ошибка Firefox, мне все равно, как я могу решить эту проблему?
Большое спасибо.