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中，“实验室”标题单元格高于“员工”。

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

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

好吧，也许是Firefox的bug，我不在乎，我该如何解决？

非常感谢。

Answer 1

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

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

表标题高度在网格布局中从chrome到Firefox不一样

1 个答案: