mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 12:58:13 +01:00
Documented scrollable tables
Documentation and customization documentation added for scrollable table component.
This commit is contained in:
Angelos Chalaris
parent
f4019a8285
commit
b01be57873
4
dist/mini-dark.css
vendored
4
dist/mini-dark.css
vendored
@ -1410,7 +1410,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.scrollable {
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -1525,7 +1525,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.scrollable.preset {
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/mini-default.css
vendored
4
dist/mini-default.css
vendored
@ -1410,7 +1410,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.scrollable {
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -1525,7 +1525,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.scrollable.preset {
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/mini-nord.css
vendored
4
dist/mini-nord.css
vendored
@ -1432,7 +1432,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.scrollable {
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -1547,7 +1547,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.scrollable.preset {
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
@ -54,7 +54,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -182,6 +182,18 @@
|
||||
<td data-label="Variable">$table-horizontal-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for horizontal <code><table></code> elements<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">'horizontal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-scrollable-table</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables scrollable <code><table></code> elements<sup><a href="#table-note-two">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-scrollable-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for scrollable <code><table></code> elements<sup><a href="#table-note-two">1</a></sup></td><td data-label="Sample value">'scrollable'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-scrollable-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Table for scrollable <code><table></code> elements<sup><a href="#table-note-two">1</a></sup></td><td data-label="Sample value">400px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-not-responsive-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for preset <code><table></code> elements</td><td data-label="Sample value">'preset'</td>
|
||||
@ -201,6 +213,7 @@
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="table-note-one">The value of <code>$table-horizontal-name</code> will only be used if <code>$include-horizontal-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="table-note-one">The valuse of <code>$table-scrollable-name</code> and <code>$table-scrollable-height</code> will only be used if <code>$include-scrollable-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -49,7 +49,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
@ -138,6 +138,7 @@
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark> Table</h2>
|
||||
<div class="section box-left"><p style="text-align: justify;">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view. More specifically, the <strong>table</strong> module contains:</p><ul>
|
||||
<li><a href="table.html#syntax-responsiveness" class="sublink-1">Styling for tables and built-in responsiveness</a></li>
|
||||
<li><a href="table.html#scrollable-tables" class="sublink-1">Classes for creating scrollable tables</a></li>
|
||||
<li><a href="table.html#horizontal-tables" class="sublink-1">Classes for creating horizontal tables</a></li>
|
||||
<li><a href="table.html#variants-matrices" class="sublink-1">Classes for creating table variants and matrices</a></li>
|
||||
</ul></div><a href="table.html" class="button section">See more</a>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -682,6 +682,46 @@
|
||||
<li>For horizontal tables or matrices, check the examples below</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Scrollable tables <a href="https://codepen.io/chalarangelo/pen/OgMgRb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><table class="scrollable">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul style="text-align:justify">
|
||||
<li>Use the <code>.scrollable</code> class to make a <code><table></code> scrollable</li>
|
||||
<li>Does not support the <code><tfoot></code> element</li>
|
||||
<li>Scrollable tables might not be fully compatible with older browsers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
101
docs/table.html
101
docs/table.html
@ -60,7 +60,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
@ -232,6 +232,90 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="scrollable-tables">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Scrollable tables</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div>
|
||||
<br><table class="scrollable preset">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><td data-label="Alias">MrOne</td></tr>
|
||||
<tr><td data-label="Name">Adam</td><td data-label="Surname">Smith</td><td data-label="Alias">TheSmith</td></tr>
|
||||
<tr><td data-label="Name">Sophia</td><td data-label="Surname">Canderson</td><td data-label="Alias">Candee</td></tr>
|
||||
<tr><td data-label="Name">Nick</td><td data-label="Surname">Thomson</td><td data-label="Alias">NickThom</td></tr>
|
||||
<tr><td data-label="Name">Mark</td><td data-label="Surname">Gerkis</td><td data-label="Alias">Markie</td></tr>
|
||||
<tr><td data-label="Name">John</td><td data-label="Surname">Fergusson</td><td data-label="Alias">Fergujohn</td></tr>
|
||||
<tr><td data-label="Name">Sylvia</td><td data-label="Surname">Pouleau</td><td data-label="Alias">Sylver</td></tr>
|
||||
<tr><td data-label="Name">Norman</td><td data-label="Surname">Jones</td><td data-label="Alias">NormalJones</td></tr>
|
||||
<tr><td data-label="Name">Trevor</td><td data-label="Surname">Heidel</td><td data-label="Alias">Heidi</td></tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p style="text-align: justify;">Scrollable tables can be created by simply adding the <code>.scrollable</code> class to the root element of your table (i.e. the <code><table></code> element). Scrollable tables are flexible, so they can accommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the <code>data-label</code> attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that <code>.horizontal</code> tables do not support the <code><tfoot></code> element.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><table class="scrollable">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul style="text-align: justify;">
|
||||
<li>Due to <code>.scrollable</code> tables utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a>, some older browsers may not properly display these tables. This is especially true with legacy versions of Internet Explorer.</li>
|
||||
<li>Mixing the Flexible Layout Module with <code><table></code> elements seems to upset some browsers. We noticed this on an older mobile version of Firefox, where our implementation should work in theory, given the fact that both features are properly supported. If you notice any problems with <code>.scrollable</code> tables, feel free to <a href="https://github.com/Chalarangelo/mini.css/issues/new">submit a new issue on Github</a>.</li>
|
||||
<li><code>.scrollable</code> tables have a default maximum height of <code>400px</code>. If you want to change this, you should check out the <a href="customization.html">customization</a> page.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><table class="scrollable">
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
<tfoot>
|
||||
<span class="fore-secondary"><!-- Do not do this! --></span>
|
||||
</tfoot>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</table></pre>
|
||||
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> We already explicitly stated that, due to the way <code>.scrollable</code> tables are styled, the <code><tfoot></code> element is not supported. Please refer to the last section of this page if you need to use this element and you want to have a scrollable table layout.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="horizontal-tables">
|
||||
<div class="col-sm-12">
|
||||
@ -257,7 +341,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p style="text-align: justify;">Horizontal tables can be created, by simply adding the <code>.horizontal</code> class to the root element of your table (i.e. the <code><table></code> element). Horizontal tables are flexible, so they can accommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the <code>data-label</code> attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that <code>.horizontal</code> tables do not support the <code><tfoot></code> element.</p>
|
||||
<p style="text-align: justify;">Scrollable tables are very similar to horizontal ones and can be created by simply adding the <code>.scrollable</code> class to the root element of your table (i.e. the <code><table></code> element). Similarly to horizontal ones, they can accommodate as many data rows as you like, making their overflow scrollable, while they do not support the <code><tfoot></code> element. As usual, remember to add the <code>data-label</code> attribute, as shown in the previous section, to allow your tables to be responsive without any errors.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><table class="horizontal">
|
||||
<caption>People</caption>
|
||||
@ -297,13 +381,16 @@
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><table>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
<tfoot>
|
||||
<pre><table class="horizontal scrollable">
|
||||
<span class="fore-secondary"><!-- Bad table --></span>
|
||||
<thead>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</thead>
|
||||
<tbody>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> We already explicitly stated that, due to the way <code>.horizontal</code> tables are styled, the <code><tfoot></code> element is not supported. Please refer to the next section if you need to use this element and you want to have a horizontal table layout.</p>
|
||||
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Avoid comibing the <code>.horizontal</code> and <code>.scrollable</code> classes on the same element, as this can cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
|
||||
@ -1249,3 +1249,5 @@
|
||||
- Updated the definition of `hr` to use `$_1px` instead of `1px`.
|
||||
- Optimized `.horizontal` and `.scrollable` `table`s to use mixed definitions whenever possible.
|
||||
- Updated all flavors to use (or not) `.scrollable` `table`s.
|
||||
- Added customization documentation for `.scrollable` `table`s.
|
||||
- Documented `.scrollable` `table`s everywhere.
|
||||
|
||||
@ -217,7 +217,7 @@ table {
|
||||
}
|
||||
table.#{$table-scrollable-name} {
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
thead, tbody {
|
||||
@ -357,7 +357,7 @@ table {
|
||||
}
|
||||
table.#{$table-scrollable-name}.#{$table-not-responsive-name} {
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
thead, tbody {
|
||||
@ -589,7 +589,7 @@ table {
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding: $table-row-padding;
|
||||
padding-top: 0;
|
||||
@ -667,7 +667,7 @@ table {
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding: $table-row-padding;
|
||||
padding-top: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user