Skip to content

Option of Vertical Borders on all Table Cells #49

Description

@Daksol

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)
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions