LMS-Community/lms-community.github.io

Option of Vertical Borders on all Table Cells

Daksol opened this issue · 1 comments

Following up brief earlier discussion.

Standard mkdocs-material stylesheet only has vertical borders for the far-left and far-right, not for internal borders.

Given quite complex nature of much of what we are presenting, I think we need to give the future consumer of this info as much help as we can - even at the risk of not following a minimalist-chique.

I found this blog post from Alex Kretzschmar with CSS which claims it makes mkdocs tables look like GitHub tables. Explains things quite well.
https://blog.ktz.me/making-mkdocs-tables-look-like-github-markdown-tables/

Instructions in this comment explain how to add this to a local setup if you want to see this up-close.

Formatting example is from the musicfolder command for CLI Database commands
https://lyrion.org/reference/cli/database/#musicfolder

It looks ok to me - I also looked at it in Dark Mode.
Only negative - the rows with merged cells have a slightly thicker far right border than regular cells in the far right column. I doubt anyone would notice that if not looking for it.

WITH ADDITIONAL CSS

Image

OUT-OF-BOX

Image

To see this in your own local setup**

  • Add these two lines to mkdocs.yml
  extra_css:`
        stylesheets/tableformattingtest.css
  • Copy this code and save it as .../docs/stylesheets/tableformattingtest.css
th, td {
   border: 1px solid var(--md-typeset-table-color);
   border-spacing: 0;
   border-bottom: none;
   border-left: none;
   border-top: none;
}

.md-typeset__table {
   line-height: 1;
}

.md-typeset__table table:not([class]) {
   font-size: .74rem;
   border-right: none;
}

.md-typeset__table table:not([class]) td,
.md-typeset__table table:not([class]) th {
   padding: 9px;
}

/* light mode alternating table bg colors */
.md-typeset__table tr:nth-child(2n) {
   background-color: #f8f8f8;
}

/* dark mode alternating table bg colors */
[data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
   background-color: hsla(var(--md-hue),25%,25%,1)
}

I think I had found the same page, but didn't like the alternating background colouring. But if people prefer that, then there's nothing wrong submitting a PR.