table {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 42px);
    color: var(--txt);
    background-color: var(--tbl_bkgr);
    font-size: 1rem;
    border-collapse: collapse;
    border-radius: 0 0 8px 8px;
    table-layout: fixed;
}

thead,
tfoot {
    flex: 0 0 auto;
    background-color: var(--hdr_bkgr);
}

tfoot {
    border-radius: 0 0 8px 8px;
}




tbody {
    flex: 1 1 auto;
    background-color: var(--tbl_bkgr);
    overflow-y: auto;
}

thead tr,
tbody tr,
tfoot tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-style: hidden;
}

thead tr,
tbody tr {
    /*display: grid;*/
    /* grid-template-columns: var(--col1) var(--col2) var(--col3) var(--col4);*/
    border-bottom: 1px solid var(--line);
}

tfoot tr {
    /*  display: grid;*
    /*  grid-template-columns: 100%;*/
    height: 42px;
    line-height: 42px;
    text-align: left;
    border-top: 1px solid var(--line);
}

th,
td {
    height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box
}

th {
    line-height: 42px;

}

thead th {
    text-align: left;
    color: var(--tbl_thead_txt);
}

table,
th,
td {
    box-sizing: border-box;
}

tr.selected {
    background-color: var(--tbl_sel_bkgr);
    color: var(--tbl_sel_txt);
}

tr:focus {
  outline: none;
  box-shadow: none;
}

td.count {
    color: var(--tbl_thead_txt);
}