Improve number alignment in Markdown tables

Steve Mokrisrequested to merge
gitlab-community/gitlab-org/gitlab:smokris-master-patch-56357 into master

What does this MR do and why?

Sometimes I need to create a Markdown table to summarize numeric values. The right-alignment feature (-:) is helpful for roughly lining up the decimal places. However, by default GitLab renders numerals proportionally — the space taken up by the number 1 is narrower than the space taken up by 0 — causing the numbers to be misaligned, making it more difficult to compare numbers.

References

  • The CSS property font-variant-numeric: tabular-nums changes numerals from proportionate to fixed-width.
  • In Markdown tables, typically, columns that are left-aligned consist of text/sentences/prose (where proportional numerals are preferred), while columns that are right-aligned consist of numeric values (where fixed-width numerals are preferred). Therefore it seems reasonable to apply the above CSS rule to right-aligned columns.

Screenshots or screen recordings

  • The table below is sorted in descending order by the "size" column.
  • In the Before screenshot, the "size" column's numerals vary in width, making it more difficult to compare the numbers.
  • In the After screenshot, the "size" columns' numerals are all the same width, making it easier to see the relative sizes.
Before After
Screenshot_2026-09-07_at_16-41-40_test_issue2___1____Issue___test_test Screenshot_2026-09-07_at_16-42-23_test_issue2___1____Issue___test_test

How to set up and validate locally

Paste this table into a work item description, comment, or wiki page:

| blocklist       |       size |  hits | errors | verdict |
| --------------- | ---------: | ----: | -----: | ------- |
| if_phishing     | 11,740,683 |     1 |     14 | ❌       |
| se_gambling2    |  8,326,111 |     0 |      0 | ⚠️      |
| hg_gambling     |  7,352,135 |     0 |      0 | ⚠️      |
| se_gambling_blp |  5,407,498 |     0 |      0 | ⚠️      |
| if_gambling     |  4,864,865 |     8 |      0 | ✅       |
| if_malware      |  3,695,157 |    26 |      0 | ✅       |
| hg_multi        |  3,643,157 |     0 |      0 | ⚠️      |
| sfs             |  1,089,213 |    27 |      0 | ✅       |
| ded             |  1,063,882 |     0 |      0 | ❌       |
| hg_light        |    721,611 |     0 |      0 | ⚠️      |
| if_games        |    459,275 |     0 |      0 | ❌       |
| nlv             |    267,224 |     0 |      0 | ⚠️      |
| cl              |    133,198 | 2,224 |      0 | ✅       |

MR acceptance checklist

  • I've tested this CSS rule by manually adding it using the web browser's inspector (Firefox 154, Chromium 152, and Safari 27, all on macOS) and confirmed it has the intended effect.
  • I'm not sure whether this change is significant enough to require an automated test. If an automated test is required, I'm not sure how to go about implementing a robust test, since the only effect of the change is in-browser rendering.
  • Since this solely affects client-side rendering, I don't expect it to have any server-side impact on GitLab.com, Dedicated, or self-managed.

Merge request reports