css - 表格标题高度在网格布局中从 chrome 到 firefox 不同

Question

示例笔: 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;
}

如果你用 chrome 浏览没关系，在 firefox 中“Labs”标题单元格高于“employees”。

如您所见，这是两个并排的表格，采用网格布局。

我尝试设置高度、行高、溢出，但没有任何效果。

好吧，也许这是一个 firefox 错误，我不在乎，我该如何解决这个问题？？

非常感谢。

Answer 1

将 align-self: start; 添加到 .building-phonebook-table-labs 中，这样它就不会拉伸(stretch)到完整的单元格高度:

.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>