mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-06 13:56:27 +02:00
Complete documentation for table module
This commit is contained in:
Angelos Chalaris
@@ -583,3 +583,5 @@
|
||||
- Started the `table` doc page.
|
||||
- Made `alert`s not have rounded corners.
|
||||
- Added some base info on `table` module doc page and a basic example.
|
||||
- Full documentation for `table` module.
|
||||
- Updated all doc pages to use **2 spaces** per indentation.
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
||||
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -264,13 +264,45 @@
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><tr>
|
||||
<td>Chad</td>
|
||||
<>Wilberts</td>
|
||||
<>MrOne</td>
|
||||
</tr></pre>
|
||||
<p class="dont"><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 col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<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"><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"><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"><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>
|
||||
@@ -285,29 +317,89 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<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-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>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 acommodate 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></pre>
|
||||
<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>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<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 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12">
|
||||
<pre><table>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
<tfoot>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</table></pre>
|
||||
<p class="dont"><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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -322,29 +414,134 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div>
|
||||
<br>
|
||||
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
|
||||
<table class="preset">
|
||||
<caption>Star Wars Character Alignment Table</caption>
|
||||
<tbody>
|
||||
<tr class="border-fix">
|
||||
<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><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>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>
|
||||
<pre></pre>
|
||||
<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" autocomplete="off">
|
||||
<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>
|
||||
<tfoot>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</table></pre></div></div></div></div><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<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 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<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"><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-to: 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 col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<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"><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>
|
||||
|
||||
Reference in New Issue
Block a user