Fix table content wrapping

[hillaryfraley]

Description

Longer table headers break at the first column even when the other columns do not contain any header content.

Table columns do not expand to fit the longest content. Table columns with short content take up the same space as columns with more content.

I don't think we can fix this with markdown, but I want to investigate options and see what we can do.

Category

This is an issue with:

• bug (bug in site build, layout, or functionality)
• enhancement (add new or updated site functionality)

Affected pages

All docs pages with tables with a single header (like https://docs.sensu.io/sensu-go/latest/api/checks/#checkscheckhookshook-delete-specification)

All docs pages with content that wraps in table rows (like https://docs.sensu.io/sensu-go/latest/reference/filters/#event-attributes-available-to-filters)

Expected behavior

Long headings extend across the full width of the table when only a single column has heading content OR break at logical points rather than randomly

Table columns expand to fit the longest content they contain.

Current behavior

Longer content breaks randomly (including in the middle of words) even when no other columns contain content or have too much whitespace. It is unsightly.

Changes needed

Hillary to investigate and come up with a good idea for fixing or mitigating this.

[hillaryfraley]

I don't think it's possible to control column width in markdown unless you use HTML for tables or an extension (many of which seem to be JS). Here are a couple discussions I found:

• https://stackoverflow.com/questions/15955160/markdown-table-with-long-lines
• Feature request: Table column width markedjs/marked#266

I am not excited about using HTML for all of our tables or introducing HTML line breaks where the words are wrapping awkwardly either.

I think the solution is going to be adjusting _table.css and using styles to control this.

Other potential resources:

• Markdown Tables & CSS getpelican/pelican#1421
• https://stackoverflow.com/questions/36121672/set-table-column-width-via-markdown

[maor-rozenfeld]

For anyone facing this issue, just use &nbsp-s (non breaking space) to extend the header of the column you want to make wider. You can copy it from here: " ". Make sure to add equal amount before and after the header text so it will stay centered.

Wide  Column	Short Column
1	Uh, sama lamaa duma lamaa you assuming I'm a human What I gotta do to get it through to you I'm superhuman Innovative and I'm made of rubber So that anything you say is ricocheting off of me and it'll glue to you I'm devastating, more than ever demonstrating
2	How to give a motherfuckin' audience a feeling like it's levitating Never fading, and I know that the haters are forever waiting For the day that they can say I fell off, they'd be celebrating 'Cause I know the way to get 'em motivated I make elevating music, you make elevator music

[hillaryfraley]

Thank you @maor-rosenfeld