.rounded-bg { padding: 35px 5px 5px; background-color: white; border-radius: 5px; position: relative; border: 1px solid var(--color-border-light); box-sizing: border-box; } .straight .rounded-bg { border-radius: 0; border-width: 0 0 1px 0; } .header-container { overflow: hidden; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); padding-left: 7px; box-sizing: border-box; background-color: var(--color-bg-dark); border-radius: 5px 5px 0 0; } .straight .header-container { border-radius: 0; } .straight { height: 100%; } .straight .rounded-bg { /* 27 - height of table footer */ height: calc(100% - 27px); } @supports (-moz-appearance:none) { .header-container { top: 0; padding-left: 6px; } } .header-container > div { display: flex; width: fit-content; padding-right: 30px; } .table-container { width: 100%; max-height: 100%; overflow: auto; } table.sqliteviz-table { min-width: 100%; margin-top: -35px; border-collapse: collapse; } .sqliteviz-table thead th, .fixed-header { font-size: 14px; font-weight: 600; box-sizing: border-box; background-color: var(--color-bg-dark); color: var(--color-text-light); border-right: 1px solid var(--color-border-light); overflow: hidden; text-overflow: ellipsis; } .sqliteviz-table tbody td { font-size: 13px; background-color:white; color: var(--color-text-base); box-sizing: border-box; border-bottom: 1px solid var(--color-border-light); border-right: 1px solid var(--color-border-light); } .sqliteviz-table td, .sqliteviz-table th, .fixed-header { padding: 8px 24px; white-space: nowrap; } .sqliteviz-table tbody tr td:last-child, .sqliteviz-table thead tr th:last-child, .header-container div .fixed-header:last-child { border-right: none; } .sqliteviz-table td > div.cell-data { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-footer { display: flex; justify-content: space-between; padding: 6px 12px; } .table-footer-count { font-size: 11px; color: var(--color-text-base); }