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.

Sign up for GitHub

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

Add table-stack option for tables #653

Open
wants to merge 1 commit into
base: 0.5.10
Choose a base branch
from
Open

Add table-stack option for tables #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 54 additions & 1 deletion docs/src/elements/tables.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,58 @@ block docs-content
</tbody>
</table>

+docs-subheading('tables-stack', 'Stack tables')

.docs-demo.columns
.column.col-12
table.table.table-stack
thead
tr
th Name
th Genre
th Release date
tbody
tr
td(data-th="Name") The Shawshank Redemption
td(data-th="Genre") Crime, Drama
td(data-th="Release date") 14 October 1994
tr
td(data-th="Name") The Godfather
td(data-th="Genre") Crime, Drama
td(data-th="Release date") 24 March 1972
tr
td(data-th="Name") Schindler's List
td(data-th="Genre") Biography, Drama, History
td(data-th="Release date") 4 February 1994
tr
td(data-th="Name") Se7en
td(data-th="Genre") Crime, Drama, Mystery
td(data-th="Release date") 22 September 1995

p
| Use the #[code table-stack] class to #{'<table>'} to stack each row in a box style when the window width is smaller than or equal to #[strong 960px].
| Add #[code data-th] attribute to each #{'<td>'} tag for header to be displayed before the actual content.

pre.code(data-lang='HTML')
code
:highlight(lang="html")
<table class="table table-stack">
<thead>
<tr>
<th>name</th>
<th>genre</th>
<th>release date</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="name">The Shawshank Redemption</td>
<td data-th="genre">Crime, Drama</td>
<td data-th="release date">14 October 1994</td>
</tr>
</tbody>
</table>

+docs-subheading('tables-scroll', 'Scrollable tables')

.docs-demo.columns
Expand Down Expand Up @@ -161,6 +213,7 @@ block docs-content

p
| Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
| This class will remove the effect of #[code table-stack] class.

pre.code(data-lang='HTML')
code
Expand All @@ -171,4 +224,4 @@ block docs-content

include ../_layout/_ad-c.pug

include ../_layout/_footer.pug
include ../_layout/_footer.pug
33 changes: 33 additions & 0 deletions src/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
// Tables
$table-breakpoint: $size-lg !default;

.table {
border-collapse: collapse;
border-spacing: 0;
Expand Down Expand Up @@ -55,3 +57,34 @@
border-bottom-width: $border-width-lg;
}
}

// Responsive layout
@media (max-width: $table-breakpoint) {
.table:not(.table-scroll) {
&.table-stack {
thead th {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selector should have depth of applicability no greater than 2, but was 3

display: none;
}

tr {
border-bottom: $border-width solid $border-color;

&:first-child {
border-top: $border-width solid $border-color;
}
}

td,
th {
border-bottom: 0;
display: block;

&[data-th]::before {
content: attr(data-th);
display: block;
font-weight: bold;
}
}
}
}
}