Table row/column comparison issues - unwanted TD element added

[vijayraj-a]

Compare old table html string with new table html string(insert/delete row and column) shows some additional td elements added and display like table row, column collapses

Please find sample html code below, Before modify:

<table style="width: 100%;">
              <tbody>
                            <tr>
                                           <td style="width: 19.9828%;">This</td>
                                           <td style="width: 19.9828%;">is&nbsp;</td>
                                           <td style="width: 19.9828%;">a</td>
                                           <td style="width: 19.9828%;">sampe</td>
                                           <td style="width: 20.0000%;">for</td>
                            </tr>
                            <tr>
                                           <td style="width: 19.9828%;">html</td>
                                           <td style="width: 19.9828%;">diff</td>
                                           <td style="width: 19.9828%;">test</td>
                                           <td style="width: 19.9828%;">the</td>
                                           <td style="width: 20.0000%;">&nbsp; &nbsp;sample</td>
                            </tr>
              </tbody>
</table>

Table after modify:

<table style="width: 100%;">
              <tbody>
                            <tr>
                                           <td style="width: 49.9571%;">A1</td>
                                           <td style="width: 49.9571%;">A2</td>
                            </tr>
                            <tr>
                                           <td style="width: 49.9571%;">
                                                         <br>
                                           </td>
                                           <td style="width: 49.9571%;">cvc</td>
                            </tr>
                            <tr>
                                           <td style="width: 49.9571%;">A3</td>
                                           <td style="width: 49.9571%;">A5</td>
                            </tr>
              </tbody>
</table>

Output Result:

<table style="width: 100%;">
              <tbody>
                             <tr>
                                           <td style="width: 49.9571%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">This</del><ins style="background-color: #cfc;text-decoration: none;font-size:inherit !important; line-height: inherit !important;">A1</ins></td>
                                           <td style="width: 49.9571%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">is&nbsp;</del></td>
                                           <td style="width: 19.9828%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">a</del></td>
                                           <td style="width: 19.9828%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">sampe</del></td>
                                           <td style="width: 20.0000%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">for</del><ins style="background-color: #cfc;text-decoration: none;font-size:inherit !important; line-height: inherit !important;">A2</ins></td>
                             </tr>
                             <tr>
                                           <td style="width: 49.9571%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">html</del>
                                                         <br>
                                           </td>
                                           <td style="width: 49.9571%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">diff</del><ins style="background-color: #cfc;text-decoration: none;font-size:inherit !important; line-height: inherit !important;">cvc</ins></td>
                             </tr>
                             <tr>
                                           <td style="width: 49.9571%;"><ins style="background-color: #cfc;text-decoration: none;font-size:inherit !important; line-height: inherit !important;">A3</ins></td>
                                           <td style="width: 49.9571%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">test</del></td>
                                           <td style="width: 19.9828%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">the</del></td>
                                           <td style="width: 20.0000%;"><del style="color: #999;background-color:#FEC8C8;font-size:inherit !important; line-height: inherit !important;">&nbsp; &nbsp;sample</del><ins style="background-color: #cfc;text-decoration: none;font-size:inherit !important; line-height: inherit !important;">A5</ins></td>
                             </tr>
              </tbody>
</table>

Note: we have customized highlight logic alone

[svaaraniemi]

Yep, I see the same behavior: comparing HTML which contains table elements often creates a diff with invalid HTML. It would be cool to fix this.