Desktop: Make table in HTML format horizontally scrollable

[wljince007]

Summary

Make table in HTML format horizontally scrollable by give table a div parent, so the width of the table is limited to the screen width.
See [Mobile, Desktop: Make table horizontally scrollable by give table a div parent, so the width of the table is limited to the screen width.] : #10161

Test

Test on Desktop

17_1728811009.mp4

Test on IOS Mobile

18_1728812365.mp4

[wljince007]

When GitHub displays an HTML table, it also moves the table left and right to keep it within the screen range. During dragging, the content is not allowed to shake from side to side.

c74f4574f48b3952d4d0c9d37731ddae.mp4

[laurent22]

There are still many websites that have their layout done using tables within tables. Isn't this change going to interfere with this by making all tables scrollable?

[wljince007]

1. Clipping from web or modified will add only one <div class="joplin-table-wrapper"> before the most outside table:

clipper.or.modify.mp4

2. Display on Mobile:

mobile.mp4

3. test html:

<style type="text/css">
  .seasons1987 table {
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
  }
  </style>
  <table width="600" border="1" cellpadding="0" cellspacing="0" class="seasons1987">
    <tr>
      <td width="200"><table width="200" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table></td>
      <td width="200"> </td>
      <td width="200"><table width="200" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td> </td>
      <td><table width="200" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table></td>
      <td> </td>
    </tr>
    <tr>
      <td><table width="200" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table></td>
      <td> </td>
      <td><table width="200" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table></td>
    </tr>
  </table>


asdlfkjasldfj asdflj asdflkj asdflkj asdflkj asdfljk asdlfkj asdlfj asdflkjasd fkljasdflkj asdlkfj asdlfkj asdflkj asdlkfj asdlfkj asdlfkj asdflkj asdlfkj asdflkj asdlfkj asdflkj asdflkj asdflkj asdflkj asdflkj asdflkj asdflkj asdflkj asdfljk asdfljk asdflkj asdfljk asdflkj asdflkj asdflkj asdfljk asdflkj asdflkj asdfljk asldfkj asldfj alsdjf

[wljince007]

Give me some example websites，I can test.

[laurent22]

Ok I think that makes sense, thank you for implementing this @wljince007!