Table (responsive)
CODE
×
HTML
<div class='table'> <table class='table v1'><thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> <th scope="col">Link</th> </tr> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>https://www.snowflake.ch</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td>https://atomic-kitchen.com</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> <td>https://www.snowflake.ch</td> </tr> </tbody></table> </div>
CSS
@media screen and (max-width: 991px) { div.table { margin-top: calc(var(--fs-ll) * var(--lh-s) / 2); margin-bottom: calc(var(--fs-ll) * var(--lh-s) / 2); } } @media screen and (max-width: 575px) { div.table { margin-top: calc(var(--fs-l) * var(--lh-m) / 2); margin-bottom: calc(var(--fs-l) * var(--lh-m) / 2); } } table.table.v1 { max-width: var(--max-w); font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-xs); line-height: var(--lh-m); color: var(--fc2); margin-top: calc(var(--fs-l) * var(--lh-s) / 2); margin-bottom: calc(var(--fs-l) * var(--lh-s) / 2); } @media screen and (max-width: 991px) { table.table.v1 { font-size: var(--fs-xxs); margin-top: calc(var(--fs-m) * var(--lh-s) / 2); margin-bottom: calc(var(--fs-m) * var(--lh-s) / 2); } } @media screen and (max-width: 575px) { table.table.v1 { font-size: var(--fs-xxxs); margin-top: calc(var(--fs-s) * var(--lh-m) / 2); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } } .table > :not(caption) > * > * { background-color: transparent; } thead th { border-bottom: 1px solid var(--lc5) !important; font-weight: 500; } tbody > tr:last-of-type > * { border-color: transparent; }
JS
Table (responsive)
Last Edit: Oct 10, 2023, 1:09pm
×
#
First
Last
Handle
Link
1
Mark
Otto
@mdo
https://www.snowflake.ch
2
Jacob
Thornton
@fat
https://atomic-kitchen.com
3
Larry the Bird
@twitter
https://www.snowflake.ch