Created
May 15, 2020 19:32
-
-
Save grobelr/48004f26fbee488bdea8938abd760084 to your computer and use it in GitHub Desktop.
tabl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Allocation</h2> | |
<div class="table-wrapper"> | |
<table class="fl-table"> | |
<thead> | |
<tr> | |
<th>Exchange</th> | |
<th>Currency</th> | |
<th>Percent</th> | |
<th>Total</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>NovaDAX</td> | |
<td>BRL</td> | |
<td>99%</td> | |
<td>4500</td> | |
</tr> | |
<tr> | |
<td>Foxbit</td> | |
<td>BRL</td> | |
<td>60%</td> | |
<td>2500</td> | |
</tr> | |
<tr> | |
<td>FTX</td> | |
<td>USD</td> | |
<td>78%</td> | |
<td>4998</td> | |
</tr> | |
<tr> | |
<td>Kraken</td> | |
<td>USD</td> | |
<td>26%</td> | |
<td>150</td> | |
</tr> | |
<tbody> | |
</table> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
} | |
body{ | |
font-family: Helvetica; | |
-webkit-font-smoothing: antialiased; | |
background: rgba( 71, 147, 227, 1); | |
} | |
h2{ | |
text-align: center; | |
font-size: 18px; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
color: white; | |
padding: 30px 0; | |
} | |
/* Table Styles */ | |
.table-wrapper{ | |
margin: 10px 70px 70px; | |
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 ); | |
} | |
.fl-table { | |
border-radius: 5px; | |
font-size: 12px; | |
font-weight: normal; | |
border: none; | |
border-collapse: collapse; | |
width: 100%; | |
max-width: 100%; | |
white-space: nowrap; | |
background-color: white; | |
} | |
.fl-table td, .fl-table th { | |
text-align: center; | |
padding: 8px; | |
} | |
.fl-table td { | |
border-right: 1px solid #f8f8f8; | |
font-size: 12px; | |
} | |
.fl-table thead th { | |
color: #ffffff; | |
background: #707d8b; | |
} | |
.fl-table thead th:nth-child(odd) { | |
color: #ffffff; | |
background: #324960; | |
} | |
.fl-table tr:nth-child(even) { | |
background: #F8F8F8; | |
} | |
/* Responsive */ | |
@media (max-width: 767px) { | |
.fl-table { | |
display: block; | |
width: 100%; | |
} | |
.table-wrapper:before{ | |
content: "Scroll horizontally >"; | |
display: block; | |
text-align: right; | |
font-size: 11px; | |
color: white; | |
padding: 0 0 10px; | |
} | |
.fl-table thead, .fl-table tbody, .fl-table thead th { | |
display: block; | |
} | |
.fl-table thead th:last-child{ | |
border-bottom: none; | |
} | |
.fl-table thead { | |
float: left; | |
} | |
.fl-table tbody { | |
width: auto; | |
position: relative; | |
overflow-x: auto; | |
} | |
.fl-table td, .fl-table th { | |
padding: 20px .625em .625em .625em; | |
height: 60px; | |
vertical-align: middle; | |
box-sizing: border-box; | |
overflow-x: hidden; | |
overflow-y: auto; | |
width: 120px; | |
font-size: 13px; | |
text-overflow: ellipsis; | |
} | |
.fl-table thead th { | |
text-align: left; | |
border-bottom: 1px solid #f7f7f9; | |
} | |
.fl-table tbody tr { | |
display: table-cell; | |
} | |
.fl-table tbody tr:nth-child(odd) { | |
background: none; | |
} | |
.fl-table tr:nth-child(even) { | |
background: transparent; | |
} | |
.fl-table tr td:nth-child(odd) { | |
background: #F8F8F8; | |
border-right: 1px solid #E6E4E4; | |
} | |
.fl-table tr td:nth-child(even) { | |
border-right: 1px solid #E6E4E4; | |
} | |
.fl-table tbody td { | |
display: block; | |
text-align: center; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment