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

6
assets/scss/style.scss
View File

@ -149,22 +149,24 @@ table {
padding: 0.5rem; padding: 0.5rem;
} }
.fold-table + table {
tr { tr {
@include below-container-width { @include below-container-width {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
}
td { 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>