.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.device-table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background: var(--white);
min-width: 1000px;
}

.device-table thead th {
    background: #1f2937;
    color: var(--white);
    z-index: 10;
}

@media screen and (max-width: 768px) {
    .device-table thead th {
        position: sticky;
        top: 100px;
    }
}   

.device-table thead {
background: #1f2937;
color: var(--white);
}

.device-table th,
.device-table td {
padding: 10px 12px;
border: 1px solid #e5e7eb;
vertical-align: top;
}

.device-table tbody tr:nth-child(even) {
background: #f9fafb;
}

.device-table tbody tr:hover {
background: #eef2ff;
}

.device-table th {
font-weight: 600;
text-align: left;
}

.device-table td {
color: #111827;
}

.device-table a {
color: #2563eb;
text-decoration: none;
}

.device-table a:hover {
text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
.device-table {
    font-size: 12px;
}

.device-table th,
.device-table td {
    padding: 8px;
}
}