remark-responsive-tables
v1.0.0
Published
Creates a responsibe table by extracting `thead` titles and injecting them into each `tbody` row, those are hidded by default on desktop with CSS and displayed on mobile.
Downloads
6
Readme
remark-responsible-tables
Creates a responsibe table by extracting thead
titles and injecting them into each tbody
row,
those are hidded by default on desktop with CSS and displayed on mobile.
Options
classnames
(required) Object
Classnames for each element:
title
:thead
titlesdescription
: Second column descriptioncontent
: Element that encapsulates description shown on mobilemobile
: Media query class for mobiledescription
: Media query class for desktop
{
'title': 'title',
'description': 'description',
'content': 'content',
'mobile': 'mobile',
'desktop': 'desktop'
}
Example
Mobile
Desktop
Code
Options
{
'classnames': {
'title': 'title',
'description': 'description',
'content': 'content',
'mobile': 'mobile',
'desktop': 'desktop'
}
}
thead {
display: none;
/* Mobile */
{
display: table-header-group;
}
}
td {
display: flex;
flex-basis: 100%;
align-self: stretch;
/* Mobile */
{
display: table-cell;
}
}
.titles {
display: flex;
flex-direction: column;
justify-content: baseline;
/* Mobile */
{
display: none;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: baseline;
}
.description.desktop {
display: none;
/* Mobile */
{
display: block;
}
}
.description.mobile {
/* Mobile */
{
display: none;
}
}