Table cell padding in CSS

[tryonk]

I am trying to figure out the snippet CSS to

1. Align text in a table cell
2. Set the cell padding in a table

I’ve found --table-cell-vertical-alignment and --callout-padding and padding for several interface elements but no table cell padding.

I’ve tried setting cell padding via standard CSS, but Obsidian appears to ignore or override those settings.

table, th, td {
    text-align: left;
    padding: 0 0 0 0.5em;
	}
}

Am I missing something, or is table alignment difficult to set intentionally?

[ariehen]

Give this a try:

.markdown-rendered table :is(th, td),
.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper {
    padding: 0 0 0 0.5em;
    text-align: center;
}

You were headed in the right direction with the original, it just needed to be a bit more specific. (I used text-align: center to make sure things were working, but you can of course change it.)

---

I recommend checking out this guide if you haven’t yet:

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …

[tryonk]

Thanks for the tip(s). I’ve used the Inspector, but I’m still guessing a lot at selectors. I’ll read up on the link you shared.

I also discovered that the Minimal theme does weird things to table borders and doesn’t appear to respect settings in the Style Settings plugin. That’s odd, as it seems to be a popular and uber-configurable theme. Regardless, when I use it, all my cell borders except for the header row disappear, and if I switch back to the Default theme, they come back. Not sure what’s up with that.

[ariehen]

The snippet I shared above appears to be working with Markdown tables in Minimal:

---

Minimal has a lot of settings (both in Minimal Theme Settings and Style Settings). It’s easy to get lost, even with search.

For the table borders, the Cell lines toggle seems the one you want.

Is that setting not working on your end?

[tryonk]

Thanks—I see the settings now. Not sure how I missed them before. Maybe it was stress brain. I noticed that when I turn on row and column lines, there is no padding, but if I turn on cell lines, Minimal does insert padding. That’s what I was going for all along.

I’m familiar with the Style Settings plugin but not Minimal Theme Settings—where does that live? Are you referring to the Appearance tab in Obsidian settings?

[ariehen]

@tryonk

I’m familiar with the Style Settings plugin but not Minimal Theme Settings—where does that live?

It’s a separate plugin available in the community gallery; search and install the same way as you did for Style Settings.

[tryonk]

Working through your selector:

.markdown-rendered table :is(th, td)

• element of class markdown-rendered
  • containing a <table>
    • containing a <th> or <td>

.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper

• element of class of markdown-source-view
  • containing element of class .cm-table-widget
    • containing element of class .table-cell-wrapper

Is that accurate?

I can adjust nearly any CSS property, but padding: 2em; doesn’t touch the left padding of the first column. I’m guessing the first column is a special case.

[ariehen]

Using the default theme the above should be fine. Here I’m changing padding-left from 3em to 0.

---

This is where using the dev tools inspector comes in handy. It appears Minimal has some other CSS that’s overriding that (editor selector pictured):

.markdown-source-view.mod-cm6 th:first-child {
    padding-inline-start: var(--table-edge-cell-padding-first);
}

with --table-edge-cell-padding-first set to 0. There may be more, but some custom variables/properties for tables from Minimal:

  --table-header-border-width: 0;
  --table-column-first-border-width: 0;
  --table-column-last-border-width: 0;
  --table-row-last-border-width: 0;
  --table-edge-cell-padding-first: 0;
  --table-edge-cell-padding-last: 0;
  --table-cell-padding: 4px 10px;
  --table-header-size: var(--table-text-size);

So when using Minimal you could use:

body {
    --table-edge-cell-padding-first: 2em;
}

in addition to other CSS.

[tryonk]

Thanks. I didn’t know themes could create additional Obsidian variables—I’m guessing those are listed in the Minimal documentation?