Table quick reference
This commit is contained in:
parent
7b74682140
commit
15d7a0880c
2 changed files with 20 additions and 3 deletions
|
@ -689,7 +689,18 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>Table structure as follows:
|
||||
<ol>
|
||||
<li><code><table></code> element is the table's root element</li>
|
||||
<li><code><caption></code> (optional) serves as the table's title and must be the first element inside the table</li>
|
||||
<li><code><thead></code> serves as the table's header row, populated with <code><th></code></li>
|
||||
<li><code><tfoot></code> (optional) serves as the table's footer and must be immediately after <code><thead></code></li>
|
||||
<li><code><tbody></code> is the table's body, populated with <code><td></code> elements</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Tables are responsive and collapse into cards on mobile devices</li>
|
||||
<li>Always specify a <code>data-label</code> for each <code><td></code> element corresponding to the column's header to properly display table on mobile devices</li>
|
||||
<li>For horizontal tables or matrices, check the examples below</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -744,7 +755,9 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>Use the <code>.horizontal</code> class to make a <code><table></code> horizontal</li>
|
||||
<li>Does not support the <code><tfoot></code> element</li>
|
||||
<li>Horizontal tables might not be fully compatible with older browsers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -774,7 +787,10 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>Use the <code>.striped</code> class to make a <code><table></code> striped</li>
|
||||
<li>Use the <code>.preset</code> class to make a <code><table></code> to create matrices or otherwise preset tables</li>
|
||||
<li>Preset matrix tables might require some CSS tweaks to deal with border styling errors</li>
|
||||
<li>You can combine <code>.striped</code>, <code>.preset</code> and <code>.horizontal</code>, respecting the rules of the combined structures</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -683,3 +683,4 @@
|
|||
## 20161220
|
||||
|
||||
- Added notes for `input_control` in `quick reference`.
|
||||
- Documented `table` in `quick reference`.
|
||||
|
|
Loading…
Reference in a new issue