tables: add

demo.html

@@ -419,6 +419,53 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <span class="close">&times;</span>
             </div>
 
+            <div class="page">
+                <div class="row">
+                    <div class="col">
+                        <h1>Tabelle</h1>
+
+                        <p>
+                            Le tabelle devono essere contenute dentro ad un
+                            <code>&lt;div&gt;</code> con classe
+                            <code>.table</code> per ottenere lo stile.
+                        </p>
+
+                        <div class="table">
+                            <table>
+                                <tr>
+                                    <th>Colonna 1</th>
+                                    <th>Colonna 2</th>
+                                    <th>Colonna 3</th>
+                                    <th>Colonna 4</th>
+                                    <th>Colonna 5</th>
+                                </tr>
+                                <tr>
+                                    <td>Cella 1</td>
+                                    <td>Cella 2</td>
+                                    <td>Cella 3</td>
+                                    <td>Cella 4</td>
+                                    <td>Cella 5</td>
+                                </tr>
+                                <tr>
+                                    <td>Cella 1</td>
+                                    <td>Cella 2</td>
+                                    <td>Cella 3</td>
+                                    <td>Cella 4</td>
+                                    <td>Cella 5</td>
+                                </tr>
+                                <tr>
+                                    <td>Cella 1</td>
+                                    <td>Cella 2</td>
+                                    <td>Cella 3</td>
+                                    <td>Cella 4</td>
+                                    <td>Cella 5</td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <footer>
                 <p>
                     Ubuntu e Canonical sono marchi registrati da Canonical

scss/_tables.scss

+/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+div.table {
+    overflow-x: auto;
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+
+        tr td, tr th {
+            padding: 0.7em 1em;
+            border-bottom: 1px solid mix(#fff, $color_warm_gray, 50%);
+        }
+
+        tr th {
+            font-weight: 400;
+            text-align: left;
+        }
+
+        tr:last-child td {
+            border-bottom: 0;
+        }
+    }
+}

scss/theme.scss

@@ -20,6 +20,7 @@
 @import "buttons";
 @import "box";
 @import "alerts";
+@import "tables";
 
 @import "cookiepolicy";
 @import "navbar";