Summary Table

Categories Total Count
PII 0
URL 0
DNS 0
EKL 0
IP 0
PORT 0
VsID 0
CF 0
AI 0
VPD 0
PL 0
Other 0

File Content

// Tables
table {
margin-right: 21px; // margin-bottom: 15px;
border-collapse: collapse;
border-spacing: 0; //border-bottom: 1px solid $gray-base; //background-color: #fff;
width: 100%;
font-size: $font-size-xxs;
letter-spacing: -0.01em;
}

thead {
font-weight: 500;
border-bottom: 1px solid $gray-dark;
}

tfoot {
background-color: #fff;
border-top: 1px solid $gray-base;
font-weight: 700;
}

tr,
td,
th {
padding: $padding-table;
text-align: left;
max-width: 104px;
&.left {
text-align: left;
}
&.right {
text-align: right;
}
&.center {
text-align: center;
}
}

tbody tr {
&:hover {
background-color: lighten($color-info, 63.5%);
}
}

th {
vertical-align: bottom;
& label {
cursor: pointer;
}
}

td {
vertical-align: top;
word-break: break-all; // Prevents long lines overflowing into adjacent cell
& input[type='checkbox'] {
display: block;
margin-top: -3px;
}
& div {
margin: 0;
padding: 0;
}
& button {
text-transform: none;
}
& img {
// display: block;
margin: -4px 0 -8px;
opacity: 1;
}
& img:hover {
opacity: 0.6;
}
}

thead td {
text-transform: none;
}

// Helper class for tight tables witin Table Component
.pad-edges {
& tr th:first-child,
tr td:first-child {
// background-color: green;
padding-left: 10px;
}
& tr th:last-child,
tr td:last-child {
// background-color: red;
padding-right: 14px;
}
}

.wide-col {
& th,
td {
max-width: 360px;
}
}

// Table Animation
@keyframes fadeOpen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

table {
opacity: 1; // TODO: fix printing visibility issue for static tables
animation: fadeOpen ease-in-out 1;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}

.clean-table {
border-bottom: 3px solid $gray-light;
& thead {
border-bottom: 1px solid $gray-dark;
}
& tr {
border-bottom: 1px solid $gray-light;
}
& tr.row-divider {
border-bottom: 1px solid $gray-dark;
}
& td>p {
margin-bottom: 0;
}
}

// If a table contains text fields...
table {
& input[type='text'],
input[type='date'],
select {
margin-top: 0;
margin-bottom: 0;
padding: 3px;
height: 72%;
border: 1px solid $color-info-light;
font-size: inherit;
}
}

.multi {
height: 90px;
border: 1px solid $gray-base;
}

.new-row {
// Indicates new or edited items in a table
background-color: $color-info-pale;
}

table.fixed {
// Helper class
table-layout: fixed;
}

tr.secondary-service-lines {
&>td {
// Helper class for service line info
color: $gray-darker;
}
}

// General Info Tables
.info-table {
h4 {
font-size: $font-size-md;
}
h5 {
line-height: 15px;
font-weight: 500;
color: #000;
}
table {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
padding: 0;
border: none; // background-color: $gray-lightest;
box-shadow: none;
// overflow: hidden;
}
thead {
display: block; // width: 100%;
background-color: $gray-lightest;
color: $color-info; //border-bottom: 1px solid $gray-light;
padding-bottom: 4px;
margin-bottom: 8px;
}
tfoot {
display: block;
height: 12px;
background-color: $gray-lightest;
border: none;
}
tr {
max-width: 400px; // TODO: Fix max-width issue in general tables
padding: 0;
line-height: 16px;
font-size: $font-size-md;
text-align: left;
font-weight: 400;
vertical-align: bottom;
}
th {
display: block;
max-width: 141px; // TODO: Fix max-width issue in general tables
width: 141px;
padding: 4px 0;
font-size: $font-size-xs;
font-weight: 500;
}
th h4 {
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
td {
padding: 4px 0;
max-width: 300px; // TODO: Fix max-width issue in general tables
}
td h4 {
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis !important;
// background-color: red;
cursor: pointer;
}
.wrap-all {
white-space: pre-wrap;
word-break: break-all;
background-color: orange;
}
table.td-test {
& th {
width: 36px;
}
& td {
width: 180px;
}

}