# Header contains h1 font size

**URL:** <https://community.seqera.io/t/header-contains-h1-font-size/2760>\
**Category:** Ask for help\
**Tags:** multiqc\
**Created:** [September 11, 2026, 6:49am UTC](https://community.seqera.io/t/header-contains-h1-font-size/2760 "2026-09-11T06:49:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hanjiewu](https://dub1.discourse-cdn.com/flex013/user_avatar/community.seqera.io/hanjiewu/32/678_2.png) [@Hanjiewu](https://community.seqera.io/u/Hanjiewu)\
**Post date:** [September 11, 2026, 6:49am UTC](https://community.seqera.io/t/header-contains-h1-font-size/2760/1 "2026-09-11T06:49:16Z")

</div>

When using a MultiQC custom content table, I noticed that column headers containing strings such as h1 and h2 are displayed with a different font size in the generated HTML report.

For example, if the custom table contains column headers such as:

h1, h2, and other normal column names

 ![Screenshot 2026-09-11 at 2.45.24 PM](https://europe1.discourse-cdn.com/flex013/uploads/seqera/original/2X/c/c1994b95ac7187d9588db4ad58eb7c34b193213b.png)

the h1 and h2 headers are rendered with noticeably different/larger font sizes compared with the other column headers.

---

<div class="post-metadata">

**Author:** ![ewels](https://dub1.discourse-cdn.com/flex013/user_avatar/community.seqera.io/ewels/32/1_2.png) [@ewels](https://community.seqera.io/u/ewels)\
**Post date:** [September 11, 2026, 7:29am UTC](https://community.seqera.io/t/header-contains-h1-font-size/2760/2 "2026-09-11T07:29:56Z")

</div>

hah, that’s kind of hilarious 😆

Could you please attach an example file that I can use to reproduce this? Or better still, post it as a bug report issue on the MultiQC GitHub repository.

Thanks!

---

<div class="post-metadata">

**Author:** ![ewels](https://dub1.discourse-cdn.com/flex013/user_avatar/community.seqera.io/ewels/32/1_2.png) [@ewels](https://community.seqera.io/u/ewels)\
**Post date:** [September 11, 2026, 7:44am UTC](https://community.seqera.io/t/header-contains-h1-font-size/2760/3 "2026-09-11T07:44:58Z")

</div>

Follow up: I was able to replicate the bug myself locally, so no need to do anything. I’ll get a PR up to fix and let you know when it’s done.

---

<div class="post-metadata">

**Author:** ![ewels](https://dub1.discourse-cdn.com/flex013/user_avatar/community.seqera.io/ewels/32/1_2.png) [@ewels](https://community.seqera.io/u/ewels)\
**Post date:** [September 11, 2026, 8:07am UTC](https://community.seqera.io/t/header-contains-h1-font-size/2760/4 "2026-09-11T08:07:33Z")

</div>

Pull-request to fix this issue is up:

> <https://github.com/MultiQC/MultiQC/pull/3655>
>
> \### Problem
> 
> Reported on the community forum: \[Header contains h1 font size\](h…ttps://community.seqera.io/t/header-contains-h1-font-size/2760). A custom content table with columns called \`h1\` and \`h2\` renders those column headers at heading size.
> 
> A table's column anchor was used verbatim as the CSS class on its header cell, its data cells and its row in the column-config modal:
> 
> \`\`\`html
> \<th id="header\_h1" class="h1" ...\>
> \`\`\`
> 
> The anchor is derived from the column ID, so any column whose ID happens to match a Bootstrap utility class picks up that class's styling. Custom content is the easy trigger because it has no namespace, so the anchor is the raw column name.
> 
> \<details\>
> \<summary\>Details\</summary\>
> 
> Measured in Chromium, \`default\` template:
> 
> | column ID | header before | after |
> | --- | --- | --- |
> | \`h1\` | 34px | 13.6px |
> | \`h2\` | 27.2px | 13.6px |
> | \`small\` | 11.9px | 13.6px |
> | \`row\` | cells become \`display: flex\` with -12px side margins | \`table-cell\` |
> | \`table\` | 16px bottom margin, \`vertical-align: top\`, stretched width | normal |
> 
> \### Fix
> 
> Prefix the class with \`mqc-column-\` via a \`\_col\_cls()\` helper, and update the six matching jQuery selectors in \`default/src/js/tables.js\` and \`original/assets/js/tables.js\` (column show/hide, and the table scatter plot's value lookup). The \`default\` and \`disco\` compiled bundles are rebuilt.
> 
> The prefix deliberately avoids a \`col-\` substring. Bootstrap 3, used by the \`original\` template family, matches its grid classes with \`table td\[class\*="col-"\], table th\[class\*="col-"\] { display: table-cell }\`, which outranks \`th.column-hidden { display: none }\`. A \`mqc-col-\` prefix would therefore have made \*every\* column impossible to hide in \`original\`/\`geo\`/\`sections\`/\`simple\`/\`gathered\`. There is a comment on the helper to that effect.
> 
> \### Testing
> 
> \- \[x\] Code is tested and works locally
> 
> Driven through the real jQuery handlers in Chromium, on both the \`default\` and \`original\` templates, comparing against a build of the parent commit: column show/hide (including server-side \`hidden: True\` columns and the \`numcols\` counters), drag-reordering in the config modal, the table scatter plot (identical data points) and violin plot sync all behave exactly as before, with no console errors. Computed styles were diffed across every \`th\`/\`td\`: every change is a Bootstrap style being removed from a colliding column, landing on the same value as a normal column.
> 
> Checked that no CSS rule in either template family matches the prefixed class, for 58 candidate column names. The bare names collide 49-57 times, which is the bug.
> 
> All seven templates smoke-tested. \`pytest\`, \`prek run --all-files\` and \`.github/workflows/code\_checks.py\` are clean.
> 
> \### Note for anyone upgrading
> 
> \`custom\_css\_files\` that targets a table column by its bare ID as a class selector now needs the \`mqc-column-\` prefix.
> 
> 🤖 Generated with \[Claude Code\](https://claude.com/claude-code)
> 
> https://claude.ai/code/session\_016XQgrcKcMe8nwQRQANa5sz
> 
> \---
> \_Generated by \[Claude Code\](https://claude.ai/code/session\_016XQgrcKcMe8nwQRQANa5sz)\_
> 
> \</details\>

This will be included in the next release (v1.36) when it comes out.

Thanks again for reporting!

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.seqera.io/system/32/2402_2.png) [@system](https://community.seqera.io/u/system)\
**Post date:** [September 18, 2026, 8:08am UTC](https://community.seqera.io/t/header-contains-h1-font-size/2760/5 "2026-09-18T08:08:14Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
