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

【问题标题】：Table Row Inconsistent Height - Cells With No Content and contenteditable:true Have Different Height表格行高度不一致 - 没有内容和 contenteditable 的单元格：true 具有不同的高度
【发布时间】：2021-06-13 22:58:44
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你试过max-width
试试position:relative
position:relative 不适合我
把戏......td:empty::after{content:"\00a0";}
感谢您的所有帮助。事实证明，添加 td {vertical-align: initial;} 修复了它。它使用了导致问题的用户代理样式表的垂直对齐属性。再次感谢您。

标签： css contenteditable css-tables

【解决方案1】：

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

td {
  vertical-align: initial;
}

修复它。

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

【讨论】：

【解决方案2】：

成功了

    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>

【讨论】：