Empty table headers are rendered as regular empty rows

Help
1

Headerless tables are a common vertical data representation similar to Obsidian properties. However, they are rendered with an empty row above them which looks like the table is missing data:

image
image253×191 1.34 KB

But using HTML tables the same headerless table is rendered corectly with a collapsed/minimized header which avoids the confusion:

image
image234×139 1.26 KB

Steps to reproduce

| |
|--|--|
|Score 1|45|
|Score 2|75|

Did you follow the troubleshooting guide?

Yes

Expected result

Score 145
Score 275

Actual result



Score 145
Score 275

Environment

SYSTEM INFO: 
Obsidian version: 1.12.4
Installer version: 1.12.4
Operating system: Windows 11 Pro 10.0.26200
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 1
Restricted mode: on

RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.

Additional information

I have snippets enabled to debug and workaround this issue. It doesn’t affect the repro.

The greatest problem is, it’s impossible to write a CSS selector because of the lingering <br> tag. There is nothing to differentiate empty table headers.

The best approach would be to render empty headers with a class name like .headerless, but I’m also okay with the minimized default browser rendering without the <br> tag. That also would let people to write selectors agains th:empty.

2

This issue doesn’t seem to exist in reading mode, but only in editing mode. I’d love this to be fixed for editing mode (I can always click on minimized-looking row to edit its contents) because I don’t use reading mode in frequently edited documents. It becomes a distraction.

3

Sorry, We don’t support this and I am not sure we should do it.
Please, open a Feature Request if you want to headerless tables to be handled in a particular way in Live Preview.

4

@WhiteNoise thanks! Someone on Reddit came up with a custom CSS solution for that. Including it here as a workaround:

/* Live Preview: Hide header only if 1st or last cells contain nothing but a <br> */
.cm-table-widget:not(.has-focus) thead:has(th:first-child > .table-cell-wrapper > br:only-child):has(th:last-child > .table-cell-wrapper > br:only-child) {
    display: none !important;
}

/* Reading Mode */
.markdown-rendered thead:not(:has(th:not(:empty))) {
    display: none;
}