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

Merge pull request #163 from 4k1k0/scroll-table

Browse Source 
feat(tables): it replicates the responsive tables from bootstrap
This commit is contained in:
ダーシノ
2018-12-17 07:31:10 +09:00
committed by GitHub
parent aed1e8e63e 1be8016a71
commit eed573d15c
3 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -173,40 +173,54 @@
<section class="nes-container with-title">
<h2 class="title">Table</h2>
<div class="tables">
<div class="nes-table-responsive">
<table class="nes-table is-bordered is-centered">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
</tbody>
</table>
</div>
<div class="nes-table-responsive">
<table class="nes-table is-bordered is-dark">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>

5
scss/elements/tables.scss
View File

@@ -1,3 +1,8 @@
.nes-table-responsive {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.nes-table {
table-layout: fixed;
background-color: $background-color;

18
style.css
View File

@@ -16,20 +16,6 @@ div.containers > .nes-container {
max-width: 400px;
}
div.tables {
display: flex;
flex-wrap: wrap;
}
div.tables > .nes-table {
min-width: 350px;
max-width: calc(50% - 2rem);
}
div.tables > .nes-table:first-child {
margin-right: 2rem;
margin-bottom: 2rem;
}
.balloon.nes-container .nes-balloon {
max-width: 600px;
margin: 2rem 2rem;
@@ -92,10 +78,6 @@ div.tables > .nes-table:first-child {
padding: 0;
margin: 2rem 0.2rem;
}
div.tables > .nes-table {
max-width: 100%;
margin-right: 0;
}
.balloon.nes-container .nes-balloon {
max-width: 70%;
}