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

Question

table 的一行中的单元格具有不同的高度。我正在尝试解决此问题，使行高始终保持一致。

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

这些单元格的填充、边距和边框与所有其他单元格匹配，变化的是内容的高度。

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

Link 使用 table 翻页：https://sandbox.germanpearls.com/time-tracker/open-task-list/

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

有效

    td:empty::after{  
       content:"[=10=]a0";
    }

.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:"[=11=]a0";
}

<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 使用的是用户代理样式表的垂直对齐属性，这导致了问题。

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

Table Row Inconsistent Height - Cells With No Content and contenteditable:true Have Different Height

css

contenteditable

css-tables