Responsive Tables

Currency Dashboard

by Hayriye Aydin

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&amp;display=swap&amp;subset=latin-ext" rel="stylesheet">

<style>
	.col { background: var(--mid); padding: 5px }
	
	.first-col, .second-col, .third-col, .fourth-col { background: var(--mid); }
  
	.card {
    background-color: var(--mid);
    border-radius: 0;
    border: 0
  }

  .card-header {
    border: 0;
    padding: 0 auto;
    color: #fff;
  }

  .card-header h4 {
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700
  }
	
	.card-body { padding-left: .35rem; padding-right: .35rem}

  .table {
    background-color: var(--mid);
  }

  .table thead th {
    color: var(--low);
    padding: .25rem .50rem;
		font-size: .70rem;
  }

  .table td,
  .table th {
    padding: .50rem;
    vertical-align: top;
    border-top: 6px solid var(--mid);
    border-bottom: 6px solid var(--mid);
  }
	
	/*.table td:first-child{ border-top: 0; }*/

  .table tbody {
    font-size: 14px;
    font-weight: 400
  }

  .table tbody tr {
    background-color: var(--dark)
  }
	
	.tooltip-inner {
		 background-color: var(--primary);
		 color: var(--text);
	}
	
	.tooltip .arrow:before {
 		border-bottom-color: var(--primary) !important;
  	border-top-color: var(--primary) !important;
  }

</style>

<!-- Wrapper Start -->
<!--<div id="wrapper" class="animate">-->

<!-- Old Header Start-->
<header class="mHeader">
    <div class="flex">
        <div class="leftSide flex-1">
            <nav...

CSS

:root {
	 --dark: #1d2938;
	 --mid: #18222e;
	 --low: #2e3e51;
	 --lowest: #4b6d94;
	 --success: #49c685;
	 --alert: #da5558;
	 --text: #fff;
	 --textHalf: rgba(255, 255, 255, 0.5);
	 --primary: #029ee4;
}
 i {
	 vertical-align: middle;
}
 * {
	 box-sizing: border-box;
	 line-height: 1;
}
 ul, li {
	 margin: 0;
	 padding: 0;
	 list-style: none;
}
 a, a:hover {
	 text-decoration: none;
}
 body {
	 background: var(--dark);
	 width: 100vw;
	 height: 100vh;
	 position: relative;
	 font-family: "Montserrat", sans-serif;
   font-weight: 400;
	 padding: 6px;
	 margin: 0;
	 font-size: 1rem;
	 line-height: 1;
}
 ::-webkit-scrollbar {
	 width: 6px;
}
 ::-webkit-scrollbar-thumb {
	 background: var(--lowest);
}
 ::-webkit-scrollbar-track {
	 background: var(--low);
}

 div.flex {
	 display: flex;
	 margin: 0px -6px;
	 align-items: center;
}
 div.flex .flex-5 {
	 flex: 50% 0 0;
	 width: 50%;
	 padding: 0px 6px;
}
 div.flex .flex-1 {
	 flex: 15% 0 0;
	 width: 15%;
	 padding: 0px 6px;
}
 div.flex .flex-3 {
	 flex: 35% 0 0;
	 width: 35%;
	 padding: 0px 6px;
}
 .text-right {
	 text-align: right;
}
 .text-center {
	 text-align: center;
}

 .selects {
	 margin-right: 6px;
}
 .selects select {
	 height: 24px;
	 border-radius: 3px;
	 background: var(--low);
	 border: none;
	 color: var(--lowest);
	 font-size: 12px;
	 margin: 0;
	 padding: 0px 6px;
	 margin-right: 4px;
	 -webkit-appearance: none;
}
 .selects select:last-child {
	 margin: 0;
}
 .selects select:focus, .selects select:active, .selects select:hover {
	 outline: none;
	 box-shadow: none;
}

 .chartArea {
	 height: calc(40vh - 12px);
	 position: relative;
	 overflow: hidden;
}
 .chartArea .chart {
	 margin-top: 6px;
	 width: 100%;
	 max-height: calc(100% - 24px);
	 position: relative;
	 border-radius: 3px;
	 overflow: hidden;
	 background: var(--lowest);
}

 .card-body.scroll {
	 max-height: 20vh;
	 overflow-x: hidden;
	 scrollbar-color: var(--lowest) var(--low);
	 scrollbar-width: thin;
}
 .card-body.scroll2 {
	 height:...

JavaScript

document.getElementById("MenuTrigger").addEventListener("click", function() {
  let status = this.classList.contains("open");
  menuSwitcher(status);
});
document
.getElementById("userAreaTrigger")
.addEventListener("click", function() {
let status = document.getElementById("userArea").classList.contains("open");
userAreaSwitcher(status);
});
document
.getElementById("share")
.addEventListener("click", function() {
let status = document.getElementById("userArea").classList.contains("open");
userAreaSwitcher(status);
});
document
.getElementById("watch")
.addEventListener("click", function() {
let status = document.getElementById("userArea").classList.contains("open");
userAreaSwitcher(status);
});
document
.getElementById("alarm")
.addEventListener("click", function() {
let status = document.getElementById("userArea").classList.contains("open");
userAreaSwitcher(status);
});
document
.getElementById("dollar")
.addEventListener("click", function() {
let status = document.getElementById("userArea").classList.contains("open");
userAreaSwitcher(status);
});

document
.getElementById("volume")
.addEventListener("click", function() {
let status = document.getElementById("userArea").classList.contains("open");
userAreaSwitcher(status);
});

document
  .getElementById("ok")
  .addEventListener("click", function() {
    let status = document.getElementById("userArea").classList.contains("open");
    userAreaSwitcher(status);
  });
  document.addEventListener('click',function(e){
    if(e.target.type=="reset"){
      let status = document.getElementById("userArea").classList.contains("open");
      userAreaSwitcher(status);
    }
  })
function menuSwitcher(status) {
  let menu = document.getElementById("menuInside");
  let trigger = document.getElementById("MenuTrigger");
  if (status) {
    menu.style.display = "none";
    trigger.classList.remove("open");
    trigger.children[0].classList.add("dripicons-menu");
   ...