560 lines
28 KiB
HTML
560 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/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 toolkit">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, table">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
|
<meta property="og:type" content="website"/>
|
|
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/>
|
|
<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>
|
|
/* Classes and ids used in multiple pages - page top and utilities */
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
|
padding: 4px;
|
|
}
|
|
#top-logo {
|
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
#top-heading {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
.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; }
|
|
/* Local classes and ids for this page */
|
|
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
|
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
|
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #bdbdbd;
|
|
}
|
|
@media (max-width: 767px){
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
|
border: 0;
|
|
border-top: 1px solid #bdbdbd;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
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 #bdbdbd;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
|
background: #fafafa;
|
|
margin-bottom: 10px; }
|
|
table#carded td {
|
|
display: block;
|
|
border: 0;
|
|
border-bottom: 1px solid #bdbdbd;
|
|
text-align: right; }
|
|
table#carded td:before {
|
|
content: attr(data-label);
|
|
float: left;
|
|
font-weight: 700; }
|
|
table#carded td:last-child {
|
|
border-bottom: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
|
|
<a href="index.html" class="button">Introduction</a>
|
|
<a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a>
|
|
<a href="customization.html" class="button">Customization</a>
|
|
<a href="quick_reference.html" class="button">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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="tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm">
|
|
<h1>Table</h1>
|
|
<p>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><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>
|
|
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Table</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p>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 UI toolkits 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>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><br>
|
|
<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">
|
|
<div class="col-sm">
|
|
<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-4 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-8 col-md-normal">
|
|
<p>Table layout utilizes the <code><table></code> HTML element with the following structure (usual tabular structure):</p>
|
|
<ol>
|
|
<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>
|
|
</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"><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"><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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-4 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-8 col-md-normal">
|
|
<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 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="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>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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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-4 col-md-normal">
|
|
<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>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" 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>
|
|
</table></pre></div></div></div></div><br>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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"><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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm">
|
|
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><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> |