Wagtail wishlist: Control column widths on table blocks

[JonellaCulmer]

What we're after: We should be able to adjust column widths to better fit the content within them.

Considerations:

• Easy for wagtail users to use
• Can column width adjust automatically?
• Pre-set widths based on the content? Fixed options that someone can choose from?
• Consider the new Wagtail typed-table block with customization to allow users to choose from 10%, 20$, 30% 0 etc width columns. @johnnyporkchops has some prototyped code saved in a local branch.
• See second part of this comment below for possible short term quick solution

Completion criteria:

• Intuitive formatting options implemented in table block for all applicable wagtail templates

Example table : https://www.fec.gov/legal-resources/enforcement/audit-reports/authorized-committee-audit-reports/kelly-for-congress-2016/
Before:

After:

[dorothyyeager]

Content team doesn't know how to do this but we'd love it to happen and we're happy to test.

[johnnyporkchops]

Moving to PI 16 Innovation sprint while I continue researching, prototyping and testing the following:

• Ways to extend the Handsontable library to achieve this
• Removing the 100% width in the CSS on table_block-created tables for betteruse browsers' built-in way of calculating table widths
• Wagtail's new typed_table_block which is available in Wagtail 12.15. Demoed this to team in 16.6
  • https://docs.wagtail.io/en/stable/reference/contrib/typed_table_block.html

For a short term solution that solves this problem for the particular table used as an example above(and others using that pattern) , we can change CSS for block-table table from 100% to auto. We also need to check how this will effect any other tables wrapped in block-table which includes any using table_block or custom_table_block.
See https://www.fec.gov/legal-resources/enforcement/audit-reports/authorized-committee-audit-reports/kelly-for-congress-2016/