523 lines
36 KiB
Text
523 lines
36 KiB
Text
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="mini-default.min.css">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
|
|
<title>mini.css - Table</title>
|
||
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, table ">
|
||
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
||
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||
|
|
<style>
|
||
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
||
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
|
||
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||
|
|
.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||
|
|
table#carded { border-collapse: collapse;border: 0;width: 100%; box-shadow: none; }
|
||
|
|
table#carded thead, table#carded th { border: 0;height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0;position: absolute;clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); }
|
||
|
|
table#carded tr {display: block;border: 1px solid #c9c9c9;box-shadow: none;background: #fafafa; margin-bottom: 0.625rem; }
|
||
|
|
table#carded td {display: block;border: 0; border-bottom: 1px solid #c9c9c9; text-align: right; }
|
||
|
|
table#carded td:before { content: attr(data-label); float: left; font-weight: 700; }
|
||
|
|
table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;} @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||
|
|
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header class="sticky">
|
||
|
|
<a href="index" class="logo"><span id="header-logo">m</span></a>
|
||
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||
|
|
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
|
||
|
|
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
|
||
|
|
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
|
||
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||
|
|
</header>
|
||
|
|
<div class="container" style="padding-left: 0.25rem;">
|
||
|
|
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||
|
|
<label class="close" for="navigation-toggle"></label>
|
||
|
|
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||
|
|
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
|
||
|
|
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
|
||
|
|
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
|
||
|
|
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
||
|
|
<br/> <a href="grid#grid-title">Grid</a>
|
||
|
|
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
||
|
|
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
|
||
|
|
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
|
||
|
|
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||
|
|
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
|
||
|
|
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
|
||
|
|
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||
|
|
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
|
||
|
|
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers & footers</a>
|
||
|
|
<br/> <a href="table#table-title">Table</a>
|
||
|
|
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
|
||
|
|
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||
|
|
<br/> <a href="card#card-title">Card</a>
|
||
|
|
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections & media</a>
|
||
|
|
<a href="card#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
|
||
|
|
<br/> <a href="tab#tab-title">Tab</a>
|
||
|
|
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||
|
|
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||
|
|
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||
|
|
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||
|
|
<br/> <a href="progress#progress-title">Progress</a>
|
||
|
|
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
|
||
|
|
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||
|
|
<br/> <a href="utility#utility-title">Utility</a>
|
||
|
|
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
||
|
|
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
||
|
|
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||
|
|
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||
|
|
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||
|
|
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||
|
|
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
|
||
|
|
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||
|
|
</nav>
|
||
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||
|
|
<div class="row" style="padding-top: 40px;" id="table-title">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<h1>Table</h1>
|
||
|
|
<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.</p>
|
||
|
|
<p style="text-align: justify;"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div class="card fluid">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Quick overview</h2>
|
||
|
|
<p style="text-align: justify;">Presenting information the right way is very important, especially so when dealing with large amounts of data. The <strong>table</strong> module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.</p><br>
|
||
|
|
</div>
|
||
|
|
<div class="section">
|
||
|
|
<h2>Quick start</h2>
|
||
|
|
<p style="text-align: justify;">To use the <strong>table</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
||
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" id="syntax-responsiveness">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div class="card fluid">
|
||
|
|
<div class="section"><h2>Basic syntax & responsiveness</h2></div>
|
||
|
|
<div class="section row">
|
||
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||
|
|
<div>
|
||
|
|
<h4>Medium/Large screen layout</h4><hr>
|
||
|
|
<table class="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>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<br>
|
||
|
|
<h4>Small screen layout</h4><hr>
|
||
|
|
<table id="carded">
|
||
|
|
<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>
|
||
|
|
<br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||
|
|
<p style="text-align: justify;">Table layout utilizes the <code><table></code> HTML element with the following structure (usual tabular structure):</p>
|
||
|
|
<ol style="text-align: justify;">
|
||
|
|
<li>On the outermost level, there is the <code><table></code> element.</li>
|
||
|
|
<li>If you want to include a <code><caption></code> element, it must by the first element inside the <code><table></code> element.</li>
|
||
|
|
<li>Following the above, you need to add a <code><thead></code> element. Inside it, you should usually add one <code><tr></code> element, which contains one or more <code><th></code> elements.</li>
|
||
|
|
<li>Immediately after the <code><thead></code> element, you can add a <code><tfoot></code> element, if you want to. Inside it, you should usually add one or more <code><tr></code> elements, which contain one or more <code><td></code> elements. </li>
|
||
|
|
<li>Finally, add your <code><tbody></code> element. Inside it, you should usually add one or more <code><tr></code> elements, which contain one or more <code><td></code> elements. For each <code><td></code> element, specify a <code>data-label</code> attribute equal to the heading of the column. This enables responsibility for your table, so that the values in the columns will be properly labeled on mobile devices.</li>
|
||
|
|
</ol>
|
||
|
|
<h3>Sample code</h3>
|
||
|
|
<pre><table>
|
||
|
|
<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>
|
||
|
|
<li>Tables are responsive by default and will change to a card-like view below a certain screen width. If you'd rather not make them responsive, check the last section on this page.</li>
|
||
|
|
<li>Specifying the <code>data-label</code> attribute is essential for the responsive version of a table to display properly. You can, however, use a value different from the column's name. Make sure it does not confuse your users, though.</li>
|
||
|
|
<li>We strongly suggest you avoid adding multiple rows in your <code><thead></code> element, as it could cause problems with accessibility. However, if you absolutely must, you might want to check <a href="http://codepen.io/chalarangelo/pen/VPqWQE">this codepen</a> for an idea on how to deal with irregular border styling.</li>
|
||
|
|
</ul><hr>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12 col-md-6">
|
||
|
|
<pre><tr>
|
||
|
|
<td>Chad</td>
|
||
|
|
<td>Wilberts</td>
|
||
|
|
<td>MrOne</td>
|
||
|
|
</tr></pre>
|
||
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Remember to always add a <code>data-label</code> attribute to your <code><td></code> elements, as the table's card view is very dependent on them to display properly. <code><th></code> elements, however, do not require or utilize this attribute.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||
|
|
<pre><table>
|
||
|
|
<caption>People</caption>
|
||
|
|
<thead>
|
||
|
|
<span class="fore-secondary"><!-- ... --></span>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<span class="fore-secondary"><!-- ... --></span>
|
||
|
|
</tbody>
|
||
|
|
<tfoot>
|
||
|
|
<span class="fore-secondary"><!-- ... --></span>
|
||
|
|
</tfoot>
|
||
|
|
</table></pre>
|
||
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> The <code><tfoot></code> element must always be immediately after the <code><thead></code> element, if included.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6">
|
||
|
|
<pre><tbody>
|
||
|
|
<tr>
|
||
|
|
<th>Name</th>
|
||
|
|
<td data-label="Name">Chad</td>
|
||
|
|
</tr>
|
||
|
|
</tbody></pre>
|
||
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Avoid inserting <code><th></code> elements inside your <code><tbody></code> element. If you want to make your tables horizontal or preset their styling in a manner different from the one shown in the previous examples, check the below sections.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||
|
|
<pre><thead>
|
||
|
|
<tr>
|
||
|
|
<td data-label="Name">Chad</td>
|
||
|
|
</tr>
|
||
|
|
</thead></pre>
|
||
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Avoid using <code><td></code> elements inside your <code><thead></code>. You should use a <code><tbody></code> element instead.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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">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">
|
||
|
|
<div class="card fluid">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Horizontal 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="horizontal 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>
|
||
|
|
</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 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>
|
||
|
|
<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>.horizontal</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>.horizontal</code> tables, feel free to <a href="https://github.com/Chalarangelo/mini.css/issues/new">submit a new issue on Github</a>.</li>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<pre><table class="horizontal scrollable">
|
||
|
|
<span class="fore-secondary"><!-- Bad table --></span>
|
||
|
|
<thead>
|
||
|
|
<span class="fore-secondary"><!-- ... --></span>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<span class="fore-secondary"><!-- ... --></span>
|
||
|
|
</tbody>
|
||
|
|
</table></pre>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" id="variants-matrices">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div class="card fluid">
|
||
|
|
<div class="section"><h2>Table variants & matrices</h2></div>
|
||
|
|
<div class="section row">
|
||
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||
|
|
<div><br>
|
||
|
|
<table class="preset">
|
||
|
|
<caption>Star Wars Character Alignment Table</caption>
|
||
|
|
<tbody>
|
||
|
|
<tr class="border-fix"><th></th><th>Lawful</th><th>Neutral</th><th>Chaotic</th></tr>
|
||
|
|
<tr><th>Good</th><td>Yoda</td><td>Luke Skywalker</td><td>Chewbacca</td></tr>
|
||
|
|
<tr><th>Neutral</th><td>C-3PO</td><td>Boba Fett</td><td>Han Solo</td></tr>
|
||
|
|
<tr><th>Bad</th><td>Darth Vader</td><td>Emperor Palpatine</td><td>Jabba the Hutt</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;">Tables are responsive by default, however you can disable this functionality for one or more tables (normal or <code>.horizontal</code>), using the <code>.preset</code> class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <code><th></code> elements inside the <code><tbody></code> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the <code>.striped</code> class.</p>
|
||
|
|
<h3>Sample code</h3>
|
||
|
|
<p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.</p><br>
|
||
|
|
<div class="container"><div class="row"><div class="tabs stacked">
|
||
|
|
<input type="checkbox" id="grid-base-sample">
|
||
|
|
<label for="grid-base-sample">Show sample code</label>
|
||
|
|
<div>
|
||
|
|
<pre><table class="preset">
|
||
|
|
<caption>Star Wars Character Alignment Table</caption>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>Lawful</td>
|
||
|
|
<th>Neutral</td>
|
||
|
|
<th>Chaotic</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Good</th>
|
||
|
|
<td>Yoda</td>
|
||
|
|
<td>Luke Skywalker</td>
|
||
|
|
<td>Chewbacca</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Neutral</th>
|
||
|
|
<td>C-3PO</td>
|
||
|
|
<td>Boba Fett</td>
|
||
|
|
<td>Han Solo</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Bad</th>
|
||
|
|
<td>Darth Vader</td>
|
||
|
|
<td>Emperor Palpatine</td>
|
||
|
|
<td>Jabba the Hutt</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<table class="striped">
|
||
|
|
<caption>People</caption>
|
||
|
|
<thead>
|
||
|
|
<span class="fore-primary"><!-- ... --></span>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<span class="fore-primary"><!-- ... --></span>
|
||
|
|
</tbody>
|
||
|
|
</table></pre></div></div></div></div><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="section">
|
||
|
|
<h3>Notes</h3>
|
||
|
|
<ul style="text-align: justify;">
|
||
|
|
<li>Making a table <code>.striped</code> also affects the color of the cards in their responsive view on mobile devices.</li>
|
||
|
|
<li>If you create a <code>.preset</code> table, which you do not want to alter via Javascript to be responsive at any time in the future, you can omit the <code>data-label</code> attributes.</li>
|
||
|
|
</ul><hr>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12 col-md-6">
|
||
|
|
<pre><style>
|
||
|
|
.border-fix > td, .border-fix > th {
|
||
|
|
border-top: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<table class="preset">
|
||
|
|
<tbody>
|
||
|
|
<tr class="border-fix">
|
||
|
|
<span class="fore-tertiary"><!-- ... --></span>
|
||
|
|
</tr>
|
||
|
|
<span class="fore-tertiary"><!-- ... --></span>
|
||
|
|
</tbody>
|
||
|
|
</table></pre>
|
||
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> The first row in a preset matrix table or any table without a <code><thead></code> element will have an extra border at the top. You can use a generic class to set <code>border-top: 0;</code> for the elements inside that row to fix this.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||
|
|
<pre><table class="horizontal preset">
|
||
|
|
<span class="fore-tertiary"><!-- ... -></span>
|
||
|
|
</table>
|
||
|
|
<span class="fore-tertiary"><!-- or --></span>
|
||
|
|
<table class="horizontal striped">
|
||
|
|
<span class="fore-tertiary"><!-- ... -></span>
|
||
|
|
</table>
|
||
|
|
<span class="fore-tertiary"><!-- or --></span>
|
||
|
|
<table class="preset striped">
|
||
|
|
<span class="fore-tertiary"><!-- ... -></span>
|
||
|
|
</table>
|
||
|
|
<span class="fore-tertiary"><!-- or --></span>
|
||
|
|
<table class="preset horizontal striped">
|
||
|
|
<span class="fore-tertiary"><!-- ... -></span>
|
||
|
|
</table></pre>
|
||
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can combine any two of the following classes without any problems: <code>.horizontal</code>, <code>.preset</code>, <code>.striped</code>. Just make sure you respect each one's specific rules.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main></div></div></div>
|
||
|
|
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|