Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option of Vertical Borders on all Table Cells #49

Open
Daksol opened this issue Apr 15, 2024 · 1 comment
Open

Option of Vertical Borders on all Table Cells #49

Daksol opened this issue Apr 15, 2024 · 1 comment
Assignees

Comments

@Daksol
Copy link
Contributor

Daksol commented Apr 15, 2024

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)
}
@Daksol Daksol self-assigned this Apr 15, 2024
@Daksol Daksol converted this from a draft issue Apr 15, 2024
@michaelherger
Copy link
Member

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.

@Daksol Daksol moved this to In progress in Documentation cleanup Apr 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: In progress
Development

No branches or pull requests

2 participants