mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-29 00:40:18 +02:00
Code Issues Releases Wiki Activity

feat(tables): it replicates the responsive tables from bootstrap

Browse Source
This commit is contained in:
Wako
2018-12-10 23:40:43 -06:00
parent 8acab18bfd
commit 02cd4844ca
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@@ -152,40 +152,72 @@
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Table</h2> <h2 class="title">Table</h2>
<div class="tables"> <div class="nes-table-responsive">
<table class="nes-table is-bordered is-centered"> <table class="nes-table is-bordered is-centered">
<thead> <thead>
<tr> <tr>
<th>Table.is-bordered</th> <th>Table.is-bordered</th>
<th>Table.is-centered</th> <th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Thou hast had a good morning</td> <td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td> <td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
</tr> </tr>
<tr> <tr>
<td>Thou hast had a good morning</td> <td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td> <td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="nes-table-responsive">
<table class="nes-table is-bordered is-dark"> <table class="nes-table is-bordered is-dark">
<thead> <thead>
<tr> <tr>
<th>Table.is-dark</th> <th>Table.is-dark</th>
<th>Table.is-bordered</th> <th>Table.is-bordered</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Thou hast had a good morning</td> <td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td> <td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
</tr> </tr>
<tr> <tr>
<td>Thou hast had a good morning</td> <td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td> <td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

5
scss/elements/tables.scss
View File

@@ -1,3 +1,8 @@
.nes-table-responsive {
@media (max-width: 768px) {
overflow-x: scroll;
}
}
.nes-table { .nes-table {
table-layout: fixed; table-layout: fixed;
background-color: $background-color; background-color: $background-color;