contenteditable in table cells causes layout issues
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Firefox 120.0 · Keyboard: US
Open case →Scenario
contenteditable in table cells causes layout issues
When a contenteditable region is inside a table cell (`<td>`), editing the content may cause layout issues in Firefox. The table may resize unexpectedly or the cell may overflow.
other
Scenario ID
scenario-contenteditable-table
Details
When a contenteditable region is inside a table cell (<td>), editing the content may cause layout issues in Firefox. The table may resize unexpectedly or the cell may overflow.
References
- Stack Overflow: Make contenteditable respect initial size of table cell - Table layout issues
- MDN: table-layout - table-layout CSS property
- Stack Overflow: Firefox doesn’t style empty elements - Empty cell behavior
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0055-contenteditable-in-table-cell | Windows 11 | Desktop or Laptop Any | Firefox 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: firefox
Text caret is invisible on position:relative elements
When editing content inside an element with `position:relative`, the text caret (cursor) is completely invisible. Text can be typed and appears in the editor, but there's no visual feedback of where the insertion point is located.
2 cases
Tags: firefox
Caret position jumps unexpectedly after pasting content
After pasting content into a contenteditable region, the caret position does not end up at the expected location, sometimes jumping to the beginning of the pasted content or to an unexpected position.
1 case
Tags: contenteditable
contenteditable behavior differs when inside an iframe
When a contenteditable region is inside an iframe, its behavior may differ from when it's in the main document. Selection, focus, and event handling may be inconsistent.
1 case
Tags: firefox
contenteditable inheritance behavior is inconsistent
When a parent element has contenteditable="true" and a child element has contenteditable="false", the inheritance behavior is inconsistent across browsers. Some browsers allow editing in the child, while others correctly prevent it. The behavior may also differ when the child has contenteditable="inherit" or no contenteditable attribute.
1 case
Tags: contenteditable
contenteditable="false" on child elements is not respected consistently
When a contenteditable region contains child elements with contenteditable="false", the behavior is inconsistent. Some browsers allow editing within these elements, while others correctly prevent it.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.