.table-actions { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px; .input-holder { margin: 0; width: 30%; margin-right: auto; } button { border: 2px solid var(--input-border); padding: 7px 20px; border-radius: var(--common-border-radius); background-color: white; margin-left: 20px; color: var(--secondary-text); font-weight: 500; img { vertical-align: middle; width: 15px; height: 15px; } } } .table { height: 50vh; overflow: auto; line-height: 1.8; header, .row { display: flex; flex-wrap: nowrap; align-items: center; padding: 0 10px; .col { width: calc(100% / 7); font-size: 14px; p, a, &>div { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } &:nth-child(1) { width: 70px; } &:nth-child(3) { flex-grow: 1; } &:nth-child(5) { width: 100px; } } } header { background-color: var(--secondary-text); color: white; border-radius: var(--common-border-radius); position: sticky; z-index: 1; top: 0; height: 50px; } .row { color: var(--secondary-text); background-color: white; border-radius: var(--common-border-radius); cursor: pointer; transition: background-color 0.3s, color 0.3s; &:nth-child(even) { background-color: var(--input-background); } &:hover { background-color: var(--primary); color: white; a { color: var(--secondary); } } } }