How to move a table in the middle of the note?

[FLIPPER112233]

What I’m trying to do

Does anyone know how to shift a table into the middle of the note?

[Marionette]

If you mean centering it horizontally, then there’s no way to do so in the ways you’d probably like (at least that I’ve found, and I’d love to be proven wrong). Using CSS or HTML causes the table to be rendered as its raw text. I’ve found that using a callout and then using CSS on the callout will work, but it wraps the table in a colored block with a big header on it.

Table Code

First, turn the table into a callout.

> [!center]
> | A | B |C|
> |---|---|---|
> | 1 | 2 |3|

Make sure to include the > marks at the beginning, followed by a space! Those are what turns the whole thing into a callout.

CSS snippet code

Add this as a CSS snippet to make it all work.

.callout[data-callout="center"] table {
    margin-left: auto;
    margin-right: auto;
}

Result

This is what you end up with:

[dmantisk]

@Marionette

.callout[data-callout="center"] table {
    margin-left: auto;
    margin-right: auto;
}

You can remove the callout stylings, and make the centering optional

/* Callout without styling */
.callout[data-callout="blank"] {
    margin: unset;
    margin-left: auto;
    margin-right: auto;
    border: unset;
    border-radius: unset;
    padding: unset;
    margin-block: 1em;
    background: unset;
    mix-blend-mode: normal;
	
	& > .callout-title {
		display: none; 
		color: #9999ff;
	}
	
	.callout-icon {
	display: none;
	}
}

/* Metadata for centering tables */
.callout[data-callout-metadata*="center-table"] table {
    margin-left: auto;
    margin-right: auto;
	margin: auto;
}

Use like this;

> [!blank|center-table]
> 
> | a   |  b  |
> | --- | --- |
> | c   | d   |
> |     |     |
> 

If it doesn’t work check your theme

[CawlinTeffid]

If you want to center all tables, a CSS snippet alone should be able to do it.

[FLIPPER112233]

I’m pretty new to whole CSS snippets, but I plugged in CSS, saved it, and reloaded it through Obsidian, and my table is still not centered. Did I do the callout wrong?

[ariehen]

dmantisk’s full snippet is working fine for me using the default theme.

It looks like you may be using the Minimal theme? If so, add --table-margin: auto; into the last section, so

/* Metadata for centering tables */
.callout[data-callout-metadata*="center-table"] table {
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    --table-margin: auto;
}

If that doesn’t work, we can try a few other things to test your .css file, but I think that should do it.

Minimal theme: live preview | reading view

---

I’ll move this to Custom CSS & Theme Design at this point.

[FLIPPER112233]

It works! Thank you!