Hiding the blank line above tables

Share & showcase
1

Obsidian recently updated their markdown spec to require a blank line before tables. I already try and avoid tables in Obsidian due to the poor interface, but this further compounds my dislike for them with how it negatively effects the visual appearance of my notes.

To help mitigate this I’ve created the following CSS to hide the blank line above tables. The blank line is still needed in the raw note, but this CSS will hide it within the live preview interface.

Simply add this code to your CSS Snippets folder, enable it, and the blank lines should now be hidden.

.cm-line:has(+ .cm-embed-block.cm-table-widget) br {
  display: none;
}
30 Likes
2

Thank you!!

3

Just here to add that you can remove the blank line with a different text editor and it works but your solution is much cleaner, thank you!

4

If you want to hide the padding and margin on the table too, you can use this.

.cm-embed-block.cm-table-widget.markdown-rendered {
    margin: 0;
    padding: 0;
}

.cm-line:has(+ .cm-embed-block.cm-table-widget) br {
    display: none;
}
5 Likes
5

This worked beautifully! Exactly what i needed.

6

Thank you @Samo! Your solution did the trick :slight_smile:

7

Was anyone able to hide the blank line below tables?

9

do ctrl+shift+p and select “toggle source mode” settings. then in source mode remove the blank line and go back to normal preview mode. you’re welcome

1 Like
10

The blank line in source serves a purpose in markdown so this can cause issues for some people (which is why it has become an automatic addition iiuc). Better to have a way to just hide the blank lines in the render.

To that end, @Samo’s solution did the trick (Thank you!). I have not yet had time to look at catching the line after as yet, but I imagine it’s relatively simple, so I’ll take a look later

11

…and just the link to the corresponding how-to: CSS snippets - Obsidian Help

12

I love that I can be annoyed by something and have a fix 5min later.

Super helpful, thanks!

13

Hi Samo,

Thank you for your css snippet, it works great.
Do you know how to do it for the obligatory empty line after a blockquote?
I would like to hide the blank line after a blockquote.

2 Likes
14 
.is-live-preview :is(.HyperMD-quote, .cm-callout) + [class="cm-active cm-line"] {
	transition: 0.5s line-height;
}

.is-live-preview :is(.HyperMD-quote, .cm-callout) + [class="cm-line"] { 
	line-height: 0;
	transition: 0.5s line-height, 0.5s background-color;
	border-radius: var(--radius-s);

.is-live-preview :is(.HyperMD-quote, .cm-callout) + [class="cm-line"]:hover {
	background-color: hsla(var(--color-accent-hsl), 0.4);
}
15

Thank you so much. Lifesaver!

16

I too have been frustrated with the limitations of markdown tables and over the years have seen people create many (unsatisfactory) solutions - which always fall short of the ideal - in Obsidian and LogSeq both. However, I think Obsidian tables have come a long way - what with support for live prevew and line breaks - they almost feel like standard HTML tables (similar to Anytype). Here’s to hoping they will support bullets some day.

One of the drawbacks I have seen with tables in a lot of apps is their uninspring look (Trilium for instance - which otherwise has excellent table support).

Find below a good, clear and uplifting look-and-feel for tables (with your snippet added at the bottom):

/* Increase readable-line-width for notes with tables */
.markdown-rendered.is-readable-line-width.tables .markdown-preview-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width.tables .cm-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width.tables .cm-content,
.markdown-source-view.mod-cm6.is-readable-line-width.tables .cm-line {
    max-width: 900px !important;
}

thead {
    caret-color: white;
    background-color: #1485ff;
}
.markdown-rendered th,
.markdown-source-view.mod-cm6 .cm-table-widget th {
    color: white;
    font-size: 1em;
    font-weight: bold;
    border: 5px solid white !important;
}

.cm-html-embed tbody tr td,
.markdown-rendered tbody tr td {
    text-align: justify;
    vertical-align: middle;
}

.cm-html-embed tbody tr:nth-child(odd) td,
.markdown-rendered tbody tr:nth-child(odd) td {
    background-color: white;
}
.cm-html-embed tbody tr:nth-child(even) td,
.markdown-rendered tbody tr:nth-child(even) td {
    background-color: #f3feff;
}

.cm-html-embed tbody tr,
.markdown-rendered tbody tr,
.cm-html-embed td,
.markdown-rendered td {
    border: 5px solid white !important;
}

.cm-html-embed td, .markdown-rendered td,
.cm-html-embed th, .markdown-rendered th {
    word-break: auto-phrase;
    min-width: 12ch;
}

.markdown-rendered table {
    margin: 1em 0.5em;
    box-shadow: -1px 2px 4px 4px #f3f3f3;
}

/* Fix for Wikipedia Theme */
.markdown-rendered table thead tr th {
    padding: 0.5em;
}

/* Hide Empty Line Before Table */
.cm-line:has(+ .cm-embed-block.cm-table-widget) br {
  display: none;
}
17

Note: Works with light themes only - works best with the superb (IMHO) Wikipedia theme.

Screenshots

Narrow table

image
image372×925 14 KB

Wide tables with multi-line content

image
image931×543 16 KB

image
image928×806 26 KB

18

Hey @kazzy respect for them CSS theme idea, here is the fix which works with dark mode too and less blurry (my tables were blurry initially)

/* Increase readable-line-width for notes with tables */
.markdown-rendered.is-readable-line-width.tables .markdown-preview-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width.tables .cm-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width.tables .cm-content,
.markdown-source-view.mod-cm6.is-readable-line-width.tables .cm-line {
    max-width: 900px !important;
}

thead {
    caret-color: var(--text-normal, white);
    background-color: var(--interactive-accent, #1485ff);
}
.markdown-rendered th,
.markdown-source-view.mod-cm6 .cm-table-widget th {
    color: var(--text-on-accent, white);
    font-size: 1em;
    font-weight: bold;
    border: 5px solid var(--background-modifier-border, white) !important;
}

.cm-html-embed tbody tr td,
.markdown-rendered tbody tr td {
    text-align: justify;
    vertical-align: middle;
}

.cm-html-embed tbody tr:nth-child(odd) td,
.markdown-rendered tbody tr:nth-child(odd) td {
    background-color: var(--background-primary, white);
}
.cm-html-embed tbody tr:nth-child(even) td,
.markdown-rendered tbody tr:nth-child(even) td {
    background-color: var(--background-secondary, #f3feff);
}

.cm-html-embed tbody tr,
.markdown-rendered tbody tr,
.cm-html-embed td,
.markdown-rendered td {
    border: 5px solid var(--background-modifier-border, white) !important;
}

.cm-html-embed td, .markdown-rendered td,
.cm-html-embed th, .markdown-rendered th {
    word-break: auto-phrase;
    min-width: 12ch;
}

.markdown-rendered table {
    margin: 1em 0.5em;
    box-shadow: -1px 2px 4px 4px var(--background-modifier-box-shadow, #f3f3f3);
}

/* Fix for Wikipedia Theme */
.markdown-rendered table thead tr th {
    padding: 0.5em;
}

/* Hide Empty Line Before Table */
.cm-line:has(+ .cm-embed-block.cm-table-widget) br {
  display: none;
}

image
image666×575 28.5 KB

image
image709×580 27.5 KB