Markdown Tables with Row Numbers

Plugins ideas
,
1

Is there any CSS Snippet/ Plugin that adds row numbers to Markdown Tables in Obsidian which updates itself when rows are deleted from between the table as well.

2

This?

table {
  counter-reset: rowNumber;
}

table tr>td:first-child {
  counter-increment: rowNumber;
}

table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

Or this?

table {
  counter-reset: rowNumber;
}

table tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) ".";
  padding-right: 0.3em;
  padding-top: 0.3em;
  text-align: right;
}

Angel

2 Likes
3

Thank you this is exactly what I was looking for by any chance is there a way to only apply the styles to certain tables ?

2 Likes
4

Welcome.

Don’t know about notes with multiple tables, but for individual notes you could add a cssclass to a YAML header:

---
cssclass: numberedrows
---

And then tweak the css to point to that specific cssclass and style the tables in those notes separately:

.numberedrows table {
  counter-reset: rowNumber;
}

.numberedrows table tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) ".";
  padding-right: 0.3em;
  padding-top: 0.3em;
  text-align: right;
}

Angel

1 Like
5

The latter one is excellent, much better looking than my previous one. i think maybe there is a room to improvement even better, like color and size for best efficiency. but i guess that also depends on the theme and other css as well