mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 16:33:58 +02:00
Code Issues Releases Wiki Activity

Documented scrollable tables

Browse Source 
Documentation and customization documentation added for scrollable table component.
This commit is contained in:
Angelos Chalaris
2017-06-09 13:08:34 +03:00
parent f4019a8285
commit b01be57873
22 changed files with 174 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/quick_reference.html
View File

@@ -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>&nbsp;View on Codepen</a></h3>
<pre>&lt;table class=&quot;scrollable&quot;&gt;
&lt;caption&gt;People&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Surname&lt;/th&gt;
&lt;th&gt;Alias&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td data-label=&quot;Name&quot;&gt;Chad&lt;/td&gt;
&lt;td data-label=&quot;Surname&quot;&gt;Wilberts&lt;/td&gt;
&lt;td data-label=&quot;Alias&quot;&gt;MrOne&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td data-label=&quot;Name&quot;&gt;Adam&lt;/td&gt;
&lt;td data-label=&quot;Surname&quot;&gt;Smith&lt;/td&gt;
&lt;td data-label=&quot;Alias&quot;&gt;TheSmith&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td data-label=&quot;Name&quot;&gt;Sophia&lt;/td&gt;
&lt;td data-label=&quot;Surname&quot;&gt;Canderson&lt;/td&gt;
&lt;td data-label=&quot;Alias&quot;&gt;Candee&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</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>&lt;table&gt;</code> scrollable</li>
<li>Does not support the <code>&lt;tfoot&gt;</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">