Search code examples
csscontenteditablecss-tables

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

The cells across one row of a table have a varying height. I'm trying to fix this so the row height is even all the way across.

The cells that are causing the problem are empty cells that have have 'contenteditable:true'. If I change them to 'contenteditable:false' the problem goes away. Also, if the cell has any content in it, the problem goes away.

Padding, margins, and borders of these cells match all other cells, it is the height of the content that is varying.

I thought it was related to the font family, size, line-height, etc. so I set them in all td's. I tried many variations of fonts, line-heights, line-break properties, etc. And can't seem to fix it.

Link to page with table: https://sandbox.germanpearls.com/time-tracker/open-task-list/

Any help would be greatly appreciated. Thank you.

enter image description here

Solution

  • For anyone else experiencing this problem, it turns out, adding:

    td {
  vertical-align: initial;
}

    fixed it.

    The td's were using the user-agent stylesheet's vertical-align property which was causing the problem.