table {
    font-size: 14px;
    height: auto;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

th {
    padding: 5px;
    border-bottom: 2px solid var(--border-color);
    background-color: var(--primary-color);
    color: var(--text-color-light);
    text-align: left;
}

th:hover {
    background-color: var(--secondary-color);
}

tr:hover {
    background-color: var(--hover-color) !important;
}

tr:nth-child(odd) {
  background-color: var(--tbl-row-odd-color);
}

td {
    padding: 5px;
    border-bottom: 1px solid var(--border-color);
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    scrollbar-width: thin;
}

tr.even {
  background-color: var(--tbl-row-even-color);
}
tr.odd {
  background-color: var(--tbl-row-odd-color);
}

.scrollable {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: auto;
}