Better table handling in new Live Preview mode

Feature archive
1

I haven’t see this surfaced yet, so here goes…

Use case or problem

Markdown tables are quite hard to read in the new Live Preview editing mode. Previously, CodeMirror Options and/or Advanced Tables mitigated the issue by padding cells with enough spaces that all the cells aligned vertically. This is no longer possible with the new Live Preview editor.

Proposed solution

Pad table cells on-the-fly in Edit mode with enough spaces that all table cells are aligned vertically.

Bonus features:

  • Parse <br> in cells to allow readable multiple lines of content.
  • Allow control of vertical alignment of cell contents (top, center, bottom).
  • Move cursor between cells when pressing Enter or Tab.
  • Add keyboard shortcuts to insert rows and columns.
  • Allow for highlighting multiple cells and applying formatting such as emphasis and bold to multiple cells at once, as in Typora.

Current workaround (optional)

None known except to stay on an earlier version of Obsidian. Neither CodeMirror Options nor Advanced Tables seem to provide this function anymore in the new Obsidian.

Example - this is really hard to work with:

image
image698×388 31.4 KB

4 Likes
2

Doesn’t advanced tables plugin do this?

3

I hadn’t mentioned Advanced Tables at first but I just updated my post. Both plugins did this; but they don’t work for me in the new Obsidian version.

I thought maybe it was because I had both plugins enabled so I disabled CodeMirror options and restarted Obsidian. I tried the Advanced Tables command to “Apply formatting to all tables in this file” and while that did result in some spaces being added, the effect was not ideal. And also, the plugin no longer pads cells on the fly.

Result of “Apply formatting to all tables in this file,” for a test table:

image

4

works for me

5

+1, sometimes the advanced tables plugin won’t work.

6

So, I made a new vault and switched themes and realized in some cases the issue was the theme I was using. I was able to make some simple tables that were padded correctly by Advanced Tables.

However, Advanced Tables didn’t like that I bolded this character, I guess?:

image

It cannot space the first row correctly, for some reason.

It would be cool if user-friendly table management was built into Obsidian, but I’ll also go ahead and post this separately as an Advanced Tables bug.

7

Same issue for me, I was able to fix it by adding a CSS snippets with the following code.

.cm-s-obsidian .HyperMD-table-row {
    white-space: pre !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-family: var(--font-monospace) !important;
}

But when adding emojis the cell pad starts to fail. I hope this can be of help to you.

image
image986×614 13.6 KB

image
image1148×644 43.3 KB

1 Like
8

Thanks! I’ve basically stepped away from using tables in Obsidian, but I’m glad a partial fix is posted here.

1 Like
9

Henry,
I added the CSS you provided, but this did not seem to fix the bug for me.
In my case the view look correct in preview, but in edit mode only the current line explicitly shows the markdown so it is the only line that has the correct column alignment.

this may be a different bug. essentially I have incorrect columns when in edit mode