# king-addons/51.1.63/includes/extensions/Data_Table_Builder/assets/frontend.css

King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder, version 51.1.63. 222 lines.

- Page: https://pluginprobe.com/plugins/king-addons/51.1.63/code/includes/extensions/Data_Table_Builder/assets/frontend.css
- Raw: https://pluginprobe.com/plugins/king-addons/51.1.63/raw/includes/extensions/Data_Table_Builder/assets/frontend.css
- Modified: 2026-05-19T16:55:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/king-addons/51.1.63/code/includes/extensions/Data_Table_Builder/assets/frontend.css#L10-L20`.

```css
.kng-table-builder {
    --kng-table-bg: #ffffff;
    --kng-table-text: #1d1d1f;
    --kng-table-muted: #6e6e73;
    --kng-table-border: rgba(0, 0, 0, 0.08);
    --kng-table-header-bg: rgba(0, 0, 0, 0.04);
    --kng-table-accent: #0071e3;
    --kng-table-row-hover: rgba(0, 0, 0, 0.03);
    --kng-table-zebra: rgba(0, 0, 0, 0.02);

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--kng-table-bg);
    color: var(--kng-table-text);
    border-radius: 20px;
    border: 1px solid var(--kng-table-border);
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    margin: 24px 0;
}

.kng-table-theme-dark {
    --kng-table-bg: #0b0b0d;
    --kng-table-text: #f5f5f7;
    --kng-table-muted: #a1a1a6;
    --kng-table-border: rgba(255, 255, 255, 0.08);
    --kng-table-header-bg: rgba(255, 255, 255, 0.08);
    --kng-table-row-hover: rgba(255, 255, 255, 0.08);
    --kng-table-zebra: rgba(255, 255, 255, 0.04);
}

.kng-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.kng-table-title {
    font-size: 18px;
    font-weight: 600;
}

.kng-table-search input {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--kng-table-border);
    background: transparent;
    color: var(--kng-table-text);
    min-width: 220px;
}

.kng-table-wrapper {
    overflow-x: auto;
}

.kng-table-no-scroll .kng-table-wrapper {
    overflow-x: visible;
}

.kng-table {
    width: 100%;
    border-collapse: collapse;
}

.kng-table th,
.kng-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--kng-table-border);
    text-align: left;
    font-size: 15px;
}

.kng-table th {
    background: var(--kng-table-header-bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kng-table-muted);
    cursor: pointer;
}

.kng-table td {
    color: var(--kng-table-text);
}

.kng-table tbody tr:hover {
    background: var(--kng-table-row-hover);
}

.kng-table.zebra tbody tr:nth-child(odd) {
    background: var(--kng-table-zebra);
}

.kng-table-align-center {
    text-align: center;
}

.kng-table-align-right {
    text-align: right;
}

.kng-table td[data-tooltip] {
    position: relative;
}

.kng-table td[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

.kng-table-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 16px;
}

.kng-table-pagination button {
    border: 1px solid var(--kng-table-border);
    background: transparent;
    color: var(--kng-table-text);
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}

.kng-table-pagination button.active {
    background: var(--kng-table-accent);
    color: #fff;
    border-color: var(--kng-table-accent);
}

.kng-table-empty {
    padding: 18px;
    border-radius: 14px;
    border: 1px dashed var(--kng-table-border);
    color: var(--kng-table-muted);
    font-size: 14px;
}

/* Presets */
.kng-table-preset-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 247, 0.6));
    backdrop-filter: blur(20px);
}

.kng-table-theme-dark.kng-table-preset-glass {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.6));
}

.kng-table-preset-contrast {
    --kng-table-accent: #0a84ff;
}

.kng-table-preset-soft-gray {
    --kng-table-header-bg: rgba(0, 0, 0, 0.02);
    --kng-table-row-hover: rgba(0, 0, 0, 0.04);
}

.kng-table-preset-modern-lines {
    border-radius: 8px;
    box-shadow: none;
}

.kng-table-preset-card-table {
    border: none;
    box-shadow: none;
}

.kng-table-preset-card-table .kng-table {
    border-spacing: 0 10px;
    border-collapse: separate;
}

.kng-table-preset-card-table tbody tr {
    background: var(--kng-table-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.kng-table-preset-dark-mode {
    --kng-table-bg: #000;
    --kng-table-text: #f5f5f7;
    --kng-table-muted: #86868b;
}

.kng-table-preset-highlight-header {
    --kng-table-header-bg: rgba(0, 113, 227, 0.12);
    --kng-table-accent: #0071e3;
}

.kng-table-preset-pricing {
    --kng-table-accent: #10b981;
}

.kng-table-preset-feature-matrix {
    --kng-table-accent: #ec4899;
}

@media (max-width: 768px) {
    .kng-table-builder {
        padding: 16px;
    }

    .kng-table-pagination {
        justify-content: center;
    }
}

```