Tables with rowspan or colspan is treated as invalid table · Issue #7 · Teamwork/visual-dom-diff · GitHub
Skip to content
This repository was archived by the owner on Sep 28, 2026. It is now read-only.
This repository was archived by the owner on Sep 28, 2026. It is now read-only.

Tables with rowspan or colspan is treated as invalid table #7

Open

Description

@diesburgm

Add the following test.

[
  'table - with colspan',
  htmlToFragment('<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2">col span</td></tr></tbody></table>'),
  htmlToFragment('<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2">col span</td></tr></tbody></table>'),
  '<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2"</td></tr></tbody></table>',
  undefined,
],

Unit test fails.

Expected: "

<td colspan="2"
onetwo
"
Received: "<table class="vdd-removed">onetwo<td colspan="2" <="" td=""><table class="vdd-added">onetwo<td colspan="2" <="" td="">"

Activity

  1. gkubisa commented on Dec 9, 2019

    @gkubisa
    Contributor

    This is a known limitation - colspan and rowspan present and not equal to "1" make visual-dom-diff bail out and show that the old table was removed and a new one added.

    The problem is with keeping columns always properly aligned which is really necessary to make diffs understandable to users. Given the complexity of this task, I decided to focus on the most common case first and bail out in case certain preconditions are not met, one of which is colspan and rowspan must equal 1.

    It is definitely possible to extend the base algorithm to handle colspan and rowspan greater than 1, at least in some cases, though it might still be necessary to place some restrictions in order to keep the result user-friendly. Unfortunately, I won't have time to implement it any time soon but I'd certainly welcome a PR.

  2. humitos commented on Jul 18, 2024

    @humitos

    I just found this issue and I'm not sure to understand if I'm hitting the same issue one or not.

    I used the following HTML snippet to test it:

    <table>
    <thead>
    <tr><th>Environment variable</th>
    <th>Zope option</th>
    <th>Default value</th>
    </tr>
    </thead>
    <tbody>
    <tr><td>DEBUG_MODE</td>
    <td>debug-mode</td>
    <td>off</td>
    </tr>
    </tbody>
    </table>

    I paste it twice in https://teamwork.github.io/visual-dom-diff/ and I'm seeing the whole table being deleted and added. Am I doing something wrong here?

    Would you mind pointing me to the section of the code where this behavior could be happening? I may be able to take a look and see if I find something relevant to make a PR.

  3. humitos commented on Feb 4, 2025

    @humitos

    I did another test using the underlying diff-match-patch dependency and it doesn't not find any difference when using the same table. I pasted the same table from the previous comment twice in https://neil.fraser.name/software/diff_match_patch/demos/diff.html and no difference is shown.

    I jumped deeply in the code of visual-dom-diff but I wasn't able to figure it out how to solve this issue 😞

  4. humitos commented on Feb 26, 2025

    @humitos

    I paste it twice in teamwork.github.io/visual-dom-diff and I'm seeing the whole table being deleted and added. Am I doing something wrong here?

    The issue that I reported here was solved by #46

  5. zmbc commented on Sep 24, 2026

    @zmbc

    I haven't thought through the intricacies of how to show the table diff (if it is present) in a user-friendly way when it has colspan or rowspan not equal to 1, but perhaps as a first pass it could be useful to at least make visual-dom-diff not show a diff when there was no change in the table? @gkubisa would you accept a PR for a quick workaround like this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions