表格行高度不一致 - 没有内容和 contenteditable:true 的单元格具有不同的高度

Question

表格一行中的单元格具有不同的高度。我正在尝试解决此问题，因此行高甚至一直跨过。

导致问题的单元格是具有'contenteditable:true'的空单元格。如果我将它们更改为 'contenteditable:false' 问题就会消失。此外，如果单元格中有任何内容，问题就会消失。

这些单元格的内边距、边距和边框与所有其他单元格匹配，只是内容的高度有所不同。

我认为这与字体系列、大小、行高等有关，所以我将它们设置在所有 td 中。我尝试了多种字体、行高、换行符属性等，但似乎无法修复。

链接到带有表格的页面：https://sandbox.germanpearls.com/time-tracker/open-task-list/

任何帮助将不胜感激。谢谢。

Answer 1

成功了

    td:empty::after{  
       content:"\00a0";
    }

.container tr td{
  position:relative;
  border:1px solid black;
  width:100px;
  height:100px;
  text-align:center;
  }
tr{
   background-color:rgba(163, 235, 226, 0.75);
   }
td:hover{
background-color:white;
}
td:empty::after{  
   content:"\00a0";
}

<table class="container">

  <tr>

    <td contentEditable = "true">I need a wonder</td>
    <td contentEditable = "true">la la la la </td>
    <td contentEditable = "true">ill jump right over</td>

  </tr>

  <tr>
    <td contentEditable = "true">into the cold cold H2O</td>
    <td contentEditable = "true">Baila, baila, baila conmigo
Baila, baila, que yo te sigo</td>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>

  </tr>

  <tr>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>

  </tr>

</table>

Answer 2

对于遇到此问题的其他任何人，事实证明，添加：

td {
  vertical-align: initial;
}

修复它。

td 正在使用导致问题的用户代理样式表的垂直对齐属性。