Web-Projects/vanilla-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a shortcode for folding rows of a table on small screens

Browse Source
This commit is contained in:
Danila Fedorin 2022-09-10 17:20:54 -07:00
parent c5a28bf7ef
commit 869f9d12c8
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/scss/style.scss
View File

@ -149,10 +149,12 @@ table {
padding: 0.5rem; padding: 0.5rem;
} }
tr { .fold-table + table {
@include below-container-width { tr {
display: flex; @include below-container-width {
flex-direction: column; display: flex;
flex-direction: column;
}
} }
} }
@ -160,11 +162,11 @@ td {
@include below-container-width { @include below-container-width {
overflow-x: auto; overflow-x: auto;
} }
padding: 0.5rem;
} }
th { td, th {
padding: 0.5rem; padding: 0.5rem;
vertical-align: top;
} }
div.highlight tr { div.highlight tr {

1
layouts/shortcodes/foldtable.html Normal file
View File

@ -0,0 +1 @@
<span class="fold-table"></span>