[Bug]: <col> element missing min-width (or width) style when column hasn't been resized

[Ragnar-Oock]

Affected Packages

@tiptap/extension-table, @tiptap/extension-table-cell, @tiptap/extension-table-header, @tiptap/extension-table-row

Version(s)

2.5.8

Bug Description

The generated <col> elements don't have a width or min-width set on them unless the corresponding column is manually resized. For columns with wrapping text that can lead to layout jump when other column are resized (you can try resizing an empty column in the repro to provoke it) and columns can end up with a width smaller than the configured cellMinWidth (both in the editor and in the HTML output)

While the "in editor" <col> are controled by prosemirror-table (I will open an issue there and link it to this one later), the output is handled by tiptap and it can easily be fixed by changing this line : https://github.com/ueberdosis/tiptap/blob/84ebd511d29db566e66e8f9b617179cf19ed2531/packages/extension-table/src/utilities/createColGroup.ts#L40 into :

cols.push([
  'col', 
  { style: hasWidth ? `width: ${ hasWidth }px` : `min-width: ${ cellMinWidth }px` }
]);

Browser Used

Firefox

Code Example URL

reproduction

Expected Behavior

The <col> should always have either width or min-width set on them to prevent column from going below the configured minimum width.

Additional Context (Optional)

No response

Dependency Updates

• [X] Yes, I've updated all my dependencies.

[Ragnar-Oock]

I'm not sure if I should open an other issue for this detail or not but it might be interesting to point out in the doc that table cells <td> and <th> should have both word-break: break-word and width: min-content to avoid layout jumps when resizing columns in table that don't have a width: 100% (like is the case in the above repro or my application)

[nperez0111]

Would be happy to accept a PR for the original issue.

For the second doc recommendation, I think that is out of scope since it is a styling question & there are multiple solutions to it