Improve table layouts, readability and fix typos (2025)

[ritorhymes]

Summary

• Fixes the security risks table spacing issues, typos and improves mobile readability by preventing vertical text sentences.

• Removes unnecessary horizontal overflow on A1–A10 tables on +1600px widescreen desktop.

• Improves table header readability by centering the top label row for A1–A10 (and keeps risk table consistent).

Breakdown

Security risks table

The security risks table (linked in the summary) has several issues including:
(1) awkward spacing between words in the same cell impacting readability
(2) typos like stray \ characters that don't belong, a missing closed parenthesis, and spelling "Weighed" instead of "Weighted"
(3) on mobile, the cell widths become very narrow and create vertical text (one word per line) which makes the ones containing a full sentence harder to read.

This fix makes the text spacing consistent and predictable, ensures sufficient space on mobile to maintain readability for full sentences, and fixes the typos. See the Before and After for Security Risks Table

A1-A10 tables

Problem (1)

All of the tables in A1-A10 on a +1600px widescreen desktop have horizontal overflow scroll unnecessarily when there should be sufficient space to fit everything. This fix makes the tables' contents all fit on desktop perfectly without the overflow or cluttering. See the Before and After for A1 Table

Problem (2)

The top label row in the A1-A10 tables aren't optimized for readability; the cells fit only one word per line and they align left making an awkward layout to read from. Given the conciseness of the tables and minimal width of the numbers that matter in the table, keeping one word per line seems acceptable, but centering the text would significantly improve readability which is what the fix does. See the Before and After for A1 Table.

Note The risk table has some cells of comparable short text length to the A#'s and others including a full sentence, so having it be align-left vs align-center for readability has trade-offs either way so I opted to just keep it consistent with the other tables and center aligned it.

Implementation

I added extra.css and applied the table stylings as a base class table-base with specific selectors as needed so it could be reused. I applied it to all tables and added a special .table-risk class to prevent the vertical text wrap down on sentences inside the security risks table.

Mkdocs has behavior where if you override the default table styling, it wipes away many of the default properties it originally had, so much the code I included is also re-applying the same default CSS properties and values that mkdocs originally had. I checked the browser dev tools to confirm what was being applied live to ensure I knew the exact properties and values to include, so the tables should otherwise look and behave the same, besides the specific changes made.

Testing

You can test the fixes on this demo site top10.ritovision.com.

I tested the fixes on Chrome and Firefox desktop and mobile browsers and can confirm stability.

Before and After Screenshots

A1 Table

The A1 table below is representative of the same issues found on all tables A1-A10.

Desktop Before
Note I did crop the sides of the screenshots here to allow it to zoom in closer to examine, but these are +1600px widescreen desktop shots

Notice the horizontal overflow scroll bar in the table despite the page content having its maximum width allowed on desktop

Desktop After
Notice all the same content is present and fits perfectly without horizontal overflow scroll

Mobile Before
Notice the vertical text in the table aligned left

Mobile After
Notice the vertical text in the table aligned center

Risk Table

Desktop Before
Notice the typos mentioned, and see the spacing differences between the text in the second cell "Attack Vector" and the fourth cell "Technical Impacts", the former has a much larger gap of space between the words despite it being the same amount, and the word "Impact" is offset to the right.

Desktop After
Notice the typos fixed, and the spacing consistent.

Mobile Before
Notice the bottom first and fourth cells containing a full sentence where each word has to be read vertically.

Mobile After Pt 1
Notice the cells now fit multiple words horizontally and can be read more like a sentence, with horizontal overflow scroll used to reveal the rest of the cells to the right (see the next image).

Mobile After Pt 2 (scrolling the right side of the table)