.tableContainer { width: 100%; height: calc(100vh - 170px); position: relative; overflow: auto; } /* Table */ .table { width: 100%; border-collapse: collapse; } /* Targets whole header */ .tableHeader { background: #1c1d2b; border-bottom: 1px solid #212235; } /* Targets individual header */ .tableHeader th { align-items: center; gap: 24px; padding: 12px 24px; text-align: left; color: #85869b; color: color(display-p3 0.5216 0.5255 0.6); font-family: Inter; font-size: 13px; font-style: normal; flex: 1 0 0; font-weight: 500; line-height: normal; } .tableContainer th { background-color: #1c1d2b; top: 0; position: sticky; } /* Targets individual body */ .tableBody td { padding: 12px 24px; color: #eeeffd; color: color(display-p3 0.9333 0.9373 0.9882); font-family: Inter; font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; } .tableBody tr { border-bottom: 1px solid rgba(129, 135, 255, 0); } .tableBody tr:hover { border-bottom: 1px solid rgba(129, 135, 255, 0.25); border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25); background: rgba(129, 135, 255, 0.05); background: color(display-p3 0.5098 0.5294 1 / 0.05); } .tableActions { display: flex; width: 100px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; }